javascript - 具有编译功能和 ng-show 的 Angular 对话框指令不起作用

Question

灵感来自this article我创建了一个对话框指令。但我想要更灵活一点(例如，不要在 Controller 中为每个对话框手动创建新变量/函数。我还希望对话框中没有范围，因为对话框中的其他 Angular 组件将无法正常工作如果它们不在对话框中就会出现。

所以我想到了这个:

angular.module('directives.dialog', [])
.directive('modalDialog', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    compile: function(element, attrs) {
       var html = "<div class='ng-modal' ng-show='" + attrs.dialogid + "'><div class='ng-modal-overlay' ng-click='hideModal" + attrs.dialogid + "()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'> <div class='ng-modal-close' ng-click='hideModal" + attrs.dialogid + "()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
       var newElem = $(html);
       element.replaceWith(newElem);

       return function(scope, element, attrs) {
          //link function
          scope[attrs.dialogid] = false; //don't show in the beginning
          scope['hideModal'+attrs.dialogid] = function() {
            scope[attrs.dialogid] = false;
          };
      }
    }
};
});

用法如下:

<button ng-click="toggleModal('myDialog')">Play weather god</button>
<modal-dialog dialogId='myDialog'>
      <p>Some dialog content<p>
      Other components..
      <div ng-bind="tempValue"></div>
</modal-dialog>

在我的 Controller 中，toggleModal 非常简单:

$scope.toggleModal = function(id) {
        $scope[id] = !$scope[id];
};

我的问题是ng-show没有效果，即使dialogId通过链接函数设置在范围内(切换也有效，但正如我所说它没有效果) 。动态生成的隐藏函数也在范围内。

我感觉这种方法存在一些普遍错误。你能提示一下错误可能出在哪里或者如何做得更好吗？

Answer 1

您需要编译 html 标记，以便 Angular 指令生效。

在代码中:

您需要首先注入(inject)$compile服务:

.directive('modalDialog', function($compile) {...});

然后您可以使用它来编译标记，如下所示:

var html = "<div ... ng-show='" + attrs.dialogid + "'> ..."
var newScope = scope.$new();
var newElem = $compile(html)(newScope);
element.replaceWith(newElem);

您可以使用 newScope 属性将任何变量传递给已编译的标记。例如

var newScope = scope.$new();
newScope.prop1 = 'test';

可以使用“prop1”在模板内访问它。