在指令中单击按钮时打开 ngDialog

Question

我的 directive 中有一个按钮可以打开配置 ngDialog。

这是我的 theme.html 指令代码：

<div class="col-lg-3 col-md-6">
    <div class="panel panel-{{colour}}">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-3">
                    <i class="fa fa-{{type}} fa-5x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <div class="huge">{{name}}</div>
                    <div>{{comments}}</div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <div class="ngdialog-buttons btn-toolbar">
                <button type="button" ng-dialog-controller="MainCtrl" class="ngdialog-button btn btn-primary pull-right" ng-click="openConfigWindow('theme')">Settings</button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

theme.js

angular.module('adminApp')
    .directive('theme',function() {
        return {
            templateUrl:'scripts/directives/theme/theme.html',
            restrict:'E',
            replace:true,
            scope: {
                'model': '=',
                'comments': '@',
                'name': '@',
                'colour': '@',
                'details':'@',
                'type':'@',
                'goto':'@',
                'status':'@'
                /*hooking this event invokes the ngClick, but not on the button*/
                //eventHandler: '&ngClick'
            }
        }
    });

下面是 theme 指令在 html 中的用法：

<div class="panel-body" data-ng-controller="MainCtrl">
<theme name="test" comments="New comments!" colour="info" type="sample" status="Deactivate"></theme>
</div>

main.js 包含 MainCtrl 控制器：

angular.module('adminApp')
  .controller('MainCtrl', function($scope,$position,$rootScope, ngDialog) {

      $scope.openConfigWindow = function (themeName) {
        $rootScope.theme = themeName;
        ngDialog.open({
          template: '/views/configPopup.html',
          controller: 'InsideCtrl',
          className: 'ngdialog-theme-default dialogDimension',
          closeByDocument: false
        });
      };
  })

openConfigWindow 未被调用，我应该如何将 ng-click 绑定到主题指令中的按钮？

Answer 1

openConfigWindow 需要在指令的 link 函数而不是包含范围中公开。问题是您的指令有一个独立的范围，因此看不到其父级的模型。

类似于：

link: function (scope, element, attrs) {   
      scope.openConfigWindow = function() {} 
}

此外，我不太熟悉 ngDialog，但是使用 angular-ui 模式（我知道它与 ngDialog 非常相似）你可以通过指定将范围传递到你的模式中模态实例化的范围参数。通过 $rootScope 传递信息不是一个好主意。

Answer 2

在您的指令中，您需要添加回调（您几乎已经拥有它，但它更像是一个事件处理程序，而不是 NG 通常的处理方式）。为了将参数传递回执行指令的回调表达式，您可能需要在此处阅读更多内容 - Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?

指令

angular.module('adminApp')
.directive('theme',function() {
    return {
        templateUrl:'scripts/directives/theme/theme.html',
        restrict:'E',
        replace:true,
        link: function( $scope, elem, attrs){
           $scope.openRqst = function(theme){
              $scope.openConfig({theme:theme}) //notice how I'm passing the theme param to the callback.
           }
        },
        scope: {
            'model': '=',
            'comments': '@',
            'name': '@',
            'colour': '@',
            'details':'@',
            'type':'@',
            'goto':'@',
            'status':'@',
            'openConfig': '&'
        }
    }
});

指令模板的触发按钮

<button type="button" ng-dialog-controller="MainCtrl" class="ngdialog-button btn btn-primary pull-right" 
        ng-click="openRqst('theme')">Settings</button>

实施

<theme name="test" comments="New comments!" colour="info" type="sample" status="Deactivate" open-config="openConfigWindow(theme)"></theme>

Answer 3

我从没听说过 ng-dialog-controller 这样的东西，使用 controller 选项将控制器绑定到你的指令，所以 ..

angular.module('adminApp')
   .directive('theme',function() {
     return {
       templateUrl:'scripts/directives/theme/theme.html',
       restrict:'E',
       replace:true,
       controller: 'MainCtrl',
       .............
       .........

    }
  }

});

在指令中单击按钮时打开 ngDialog

Open ngDialog on button click from directive

html

javascript

angularjs

ng-dialog

指令

指令模板的触发按钮

实施