Question

我尝试做的是在alertifyjs提示符下添加一些Angular。

我有这个指令：

angular.module('items').directive('cancelItem', ['$rootScope', 'Items', function ($rootScope, Items) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var item_id = attrs.cancelItem;
      element.bind('click', function (event) {
        event.stopPropagation();
        alertify.prompt(
          'Warning!',
          function (e, reason) {
            if (reason === '') { 
              e.cancel = true;
            } else {
              var data = {
                id: cancel_id,
                data: {
                  action: 'cancel'
                }
              };
              Items.update({ 
                id: item_id
              }, data)
              .$promise.then(function (data) {
                alertify.success('Item ' + item_id + ' has been cancelled');
                $rootScope.$broadcast('Item cancelled');
              });
            }
          },
          function () {
            return;
          }
        )
        .setContent(
          '<p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
          '<select class="ajs-input" ng-model="reason">' + 
          '<option ng-value="Reason 1">Option one</option>' + 
          '<option ng-value="Reason 2">Option two</option>' + 
          '<option ng-value="Reason 3">Option three</option>' + 
          '</select>' + 
          '<input class="ajs-input" type="text" ng-bind="reason">'
        );
      });

      scope.$on('$destroy', function() {
        element.unbind();
      });
    }
  };
}]);

正如您所看到的，我试图在alertify的.setContent()方法中注入一些angularjs，但它无法正常工作。

我想了解如何让它发挥作用......

Alertify提示符只提供文本输入，我想用select替换它，将结果值绑定到将来隐藏的原始alertify文本输入。

它不会将选择值更新为文本输入。

Plunker

最终工作代码：

我使用了与Alertifyjs不同的方法，完整的代码在这里：

'use strict';

angular.directive('cancelItem', ['$rootScope', '$compile',
function ($rootScope, $compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {

      var item_id = attrs.cancelItem;
      var templateElement = '<p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
        '<select class="ajs-input form-control" ng-init="reason = options[0]" ng-model="reason" ng-options="option for option in options"></select>' + 
        '<input ng-show="reason == options[10]" class="ajs-input" type="text" ng-model="otherReason" placeholder="Enter custom reason">' + 
        '<input ng-hide="true" class="ajs-input" type="text" ng-value="reason == options[10] ? otherReason : reason" ng-value="reason || otherReason">';

      scope.reason = '';
      scope.otherReason = '';
      scope.options = [
        'Option one',
        'Option two',
        'Option three',
        'Other'
      ];

      element.bind('click', function (event) {
        event.stopPropagation();
        alertify.prompt()
        .set({
          onshow: function () {
            this.setHeader('Warning!');
            this.setContent(templateElement);
            var template = angular.element(document.querySelector('.alertify'));
            $compile(template)(scope);
            scope.$digest();
          },
          onok: function (e) {
            if (scope.reason === '' || scope.scope.otherReason === '') { 
              e.cancel = true;
            } else {
              // Done!
            }
          },
          onclose: function () {
            return;
          }
        }).show();
      });

      scope.$on('$destroy', function() {
        element.unbind();
      });
    }
  };
}]);

Answer 1

每次使用带有指令的添加模板时，都需要$compile。

编译是一个遍历DOM树并将DOM元素与指令匹配的过程。

angular.module('items').directive('cancelItem', ['$rootScope','$compile', 'Items', function ($rootScope,$compile, Items) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {

      scope.reason = '';  // <--

      var item_id = attrs.cancelItem;
      element.bind('click', function (event) {
        event.stopPropagation();
        alertify.prompt(
          'Warning!',
          function (e, reason) {
            if (reason === '') { 
              e.cancel = true;
            } else {
              var data = {
                id: cancel_id,
                data: {
                  action: 'cancel'
                }
              };
              Items.update({ 
                id: item_id
              }, data)
              .$promise.then(function (data) {
                alertify.success('Item ' + item_id + ' has been cancelled');
                $rootScope.$broadcast('Item cancelled');
              });
            }
          },
          function () {
            return;
          }
        )
        .setContent(
          '<div id="alertify"><p>Are you sure you wish to CANCEL the item ' + item_id + '?</p>' +
          '<select class="ajs-input" ng-model="reason">' + 
          '<option ng-value="Reason 1">Option one</option>' + 
          '<option ng-value="Reason 2">Option two</option>' + 
          '<option ng-value="Reason 3">Option three</option>' + 
          '</select>' + 
          '<input class="ajs-input" type="text" ng-bind="reason"></div>'
        ); // <-- compile template
      });

      $compile(angular.element("#alertify").html())(scope);

      scope.$on('$destroy', function() {
        element.unbind();
      });
    }
  };
}]);

Angular指令在alertify setContent内容中不起作用

1 个答案: