0

我有一个按钮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到我的主题指令中的按钮？

4

3 回答 3

1

openConfigWindow需要在指令的链接函数中而不是包含范围中公开。问题是您的指令具有隔离范围，因此无法看到其父模型。

就像是：

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

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

于 2015-09-10T15:28:46.377 回答
1

在您的指令中，您需要添加回调（您几乎拥有它，但它更像是一个事件处理程序，而不是 NG 通常如何执行它）。为了将参数传递回实现指令的回调表达式，您可能需要在此处阅读更多内容 -角度指令可以将参数传递给指令属性中指定的表达式中的函数吗？

指示

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>
于 2015-09-10T15:31:53.407 回答
0

我从来没有听说过 ng-dialog-controller 之类的东西，将控制器绑定到您的指令使用控制器选项，所以..

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

    }
  }

});

于 2015-09-10T15:48:13.853 回答