顯示具有 AngularJS-3rd 標籤的文章。 顯示所有文章
顯示具有 AngularJS-3rd 標籤的文章。 顯示所有文章

星期二, 3月 07, 2017

[AngularUI] 如何關閉uiboostrap的modal

常用到ui-bootstrap的modal,如果要將產生的dialog 實體關閉(關閉dialog),
可以使用下面的程式 。
use $rootScope
when initializing your modal use $rootScope.modalInstance
You can access it anywhere from the application then. Hope this helps

  1. Remove the $uibModalInstance references
  2. Instead of "var modalInstance = $uibModal.open({"
    Use "$rootScope.modalInstance = $uibModal.open({
  3. Instead of $uibModalInstance.close('a');"
    Use "$rootScope.modalInstance.close('a');"

星期一, 2月 29, 2016

[AngularJS-3rd] Angular 1.4.8 使用angular dialogs service module

最近把anrgular升級到1.4.8,記錄一下要處理的流程。

相依模組

 angular-sanitize (此模組在1.4.8被獨立了,要記得include)
 angular-ui-bootstrap Version: 1.1.0 - 2016-01-18

載入模組

ngSanitize
ui.bootstrap
dialogs.main

Dialog的控制器

要注意一下因為ui-bootstrap升級後,所以原本的$modalInstance要改用$uibModalInstance

星期六, 6月 13, 2015

[AngularJS-3rd] angular-dialog-service 模組輕鬆整合訊息對話窗效果

記錄一下整合angular-dialog-service的程式筆記

主程式

libs/angular-dialog-service/dialogs.min.js => version 5.0.0

其他相依模組

required ngSanitize, bootstrap.ui,ngTranslate

Demo


以一個編輯用戶的LIST來做說明

編輯使用者
             $scope.editUser = function($index, user) {
            logger.info('edit user');
               var dlg = dialogs.create(
                'partials/users/dialog/dialog.updateUserInfo.html',
                'DialogUpdateUserInfoCtrl',
                user, {}
            );
            dlg.result.then(function(resultData) {

                $scope.users[$index] = resultData; //update users data

               
            }, function() {

            });
        };

刪除使用者
  $scope.deleteUser = function($index, user) {
            logger.info('delete user');
            // console.log(user);
            var dlg = dialogs.confirm(
                '刪除帳戶',
                '你確定要刪除帳戶' + user.U_Email + '嗎?'
            );
            dlg.result.then(function(resultData) {
//reload user data
            });

        };

星期一, 4月 20, 2015

[AngularJS-3rd] ui-select 操作筆記

記錄一下ui-select這個元件的操作
https://github.com/angular-ui/ui-select

ui-select transclude 錯誤

遇到這個問題只要升級angular的版本到1.2.18即可:D
// Recreates old behavior of ng-transclude. Used internally.
        .directive('uisTranscludeAppend', function () {
            return {
                link: function (scope, element, attrs, ctrl, transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            };
        })


星期六, 4月 11, 2015

[AngularJS-3rd] UI-Router 常用筆記

本篇慢慢記錄UI-Router相關的操作心得

UI-Router $state帶參數轉頁

  
$state.go('admin.productlist.uuid', 
{
uuid: product.FD_CurrentFilePathHash
});
 
// Admin page for productlist/:uuid
   $stateProvider
    .state('admin', {
     abstract: true,
     template: "",
     data: {
      authorizedRoles: [USER_ROLES.admin]
     }
    })
.state('admin.productlist.uuid', {

    /*manage user page */
    url: '/productlist/:uuid',

    views: {

     // the main template will be placed here (relatively named)
     // replace unnamed view '
' in this state's parent state, 'home'. '': { templateUrl: 'partials/global.index.html' }, //viewname@statusname // the child views will be defined here (absolutely named) 'header@admin.productlist': { templateUrl: 'partials/global.header.html', controller: 'HeaderCtrl' }, 'main_body@admin.productlist': { templateUrl: 'partials/product_dm/productlist.body.html', controller: 'ProductListCtrl' }, // for column two, we'll define a separate controller 'footer@admin.productlist': { templateUrl: 'partials/global.footer.html' } }, data:{ pageTitle: '產品DM' } });

星期四, 4月 09, 2015

[UI-Bootstrap] 小踩雷筆記 Tabset元件的scope操作

記錄一下使用Tabset取得控制child scope變數的筆記:
由於Tabset會建立child scope,
所以想要存在tab內部的scope變化除了用 $parent.scope變數 (如果又巢狀的scope可能會發生錯誤例外),
也可以在parent controller宣告一致的變數,就能方便取值了。
以下這個Tabset的範例可以參考:
http://plnkr.co/edit/vclolFBfF7QMQAQgNmiL?p=preview


範例目的:
Justified這個tab裡面的input,一但值被改變,外面的parent scope會一起連動。




在tabset內綁定了一個parent scope宣告的model(model.selection)
<div ng-controller="TabsDemoCtrl">
  {{model.selection}}
  <tabset>
    <tab heading="Justified">
      <input ng-model="model.selection">
    </tab>
  </tabset>
</div>



宣告一個model的物件在parent scope,所以當tab裡面的input變動時,就容易取到變動的值了。
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];

  $scope.model = {selection: ''};
  $scope.options = ['a', 'b', 'c', 'd'];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };

  $scope.navType = 'pills';
};


https://github.com/angular/angular.js/wiki/Understanding-Scopes
https://github.com/angular-ui/bootstrap/issues/1553

星期三, 9月 10, 2014

[AngularJS] 如何在UI-Bootstrap取得input file

今天在使用DialogService的時候,在modal那層的controller一直取不到input file的$scope變數,查了一下在以下這篇討論:

http://stackoverflow.com/questions/23913998/how-to-access-file-input-in-controller-using-angular-ui-bootstrap-modal

解法如下:


透過自已新建一個fileService,再新增一個directive語法去記錄檔案改變時,將file存到fileService

星期日, 8月 31, 2014

[AngularJS] NVD3基於D3繪圖的directive module


An AngularJS directive for NVD3 re-usable charting library (based on D3).
Easily customize your charts via JSON API.

NVD3讓你可以透過directive來實現D3的繪圖效果: D,使用Angular需要圖表呈現可以考慮



星期一, 8月 25, 2014

星期日, 6月 29, 2014

[AngularJS] angular dialog service v5.0.0 試用

透過angular dialog service這個第三方套件,
可以輕鬆使用modal來產生alert, confirm, custom 等效果。

測試版本: v 5.0.0

需求的套件: ngSanitize, bootstrap.ui, ngTranslate
https://github.com/m-e-conroy/angular-dialog-service

sample
http://codepen.io/m-e-conroy/pen/ALsdF


[AngularJS] Pagination 0.10.0 切換事件的event

由於目前使用NG UI-Bootstrap 0.10.0的版本,要注意頁面切換要使用on-select-page這個屬性,才有辦法正確的接收到事件的方法。

The ability to use ng-model was introduced in ui-bootstrap-tpls-0.11.0.js, as explained in thechangelog:
Both pagination and pager are now integrated with ngModelController.
page is replaced from ng-model.
on-select-page is removed since ng-change can now be used.

其他你感興趣的文章

Related Posts with Thumbnails