2

私がやろうとしているのは、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 のメソッド内にいくつかの angularjs を挿入しようとして.setContent()いますが、機能しません。

それを機能させる方法を理解したいのですが...

Alertifyプロンプトはテキスト入力のみを提供します。それを選択に置き換えて、結果の値を元のアラートテキスト入力にバインドしたいと思います。これは将来非表示になります。

選択値をテキスト入力に更新しません。

プランカー

最終作業コード:

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

1 に答える 1

2

add template をディレクティブとともに使用する場合は常に$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();
      });
    }
  };
}]);
于 2016-05-18T15:37:32.553 に答える