Открыть ngDialog по нажатию кнопки из директивы

У меня есть кнопка в моем 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 на кнопку внутри моей директивы темы?

Источник

3 ответа

Решение

В вашей директиве вам нужно добавить обратный вызов (он у вас почти был, но он был больше похож на обработчик событий, чем на то, как это обычно делает 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>
Источник

openConfigWindow должен быть представлен в функции ссылки директивы вместо содержащей области. Проблема в том, что ваша директива имеет изолированную область видимости и поэтому не может видеть модель своего родителя.

Что-то вроде:

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

Кроме того, я не очень знаком с ngDialog, но, используя модальный angular-ui (который, как я знаю, очень похож на ngDialog), вы можете передать область видимости в свой модал, указав параметр scope для модальной реализации. Передача информации через $rootScope не очень хорошая идея

Источник

Я никогда не слышал о такой вещи, как ng-dialog-controller, чтобы связать контроллер с вашей директивой, используя опцию controller, так что..

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

    }
  }

});

Источник
Другие вопросы по тегам