Javascript 角度指令在alertify setContent中不起作用

我想做的是在提示符中添加一点角度

我有这个指示：

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();
      });
    }
  };
}]);

---

无论何时在指令中使用add template，

$compile

都是必需的

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

angular.module（'items'）。指令（'cancelItem'、['$rootScope'、'$compile'，'items'，函数（$rootScope，$compile，items）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
scope.reason=''；//谢谢您的回答。实际上，使用您的代码，它不会显示select，并且在我的指令的代码中可以看到文本输入…再次感谢，现在它正确地呈现HTML，但它还没有更新
绑定
：（非常确定，
$compile
是您的解决方案，但我既没有任何实时演示，也没有错误反馈，只是不知道如何更正我的代码。或者您也可以检查，类似于您的代码。使用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();
      });
    }
  };
}]);

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();
      });
    }
  };
}]);