Question

从this article启发我创建了一个对话框指令。但我想要更灵活一些（例如，不要在每个对话框中手动在控制器中创建新的变量/函数。我也希望在对话框中没有范围，因为对话框中的其他角度组件不起作用如果他们不在对话框中那就好了。

所以我想到了这个：

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>

toggleModal在我的控制器中非常简单：

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

我的问题是ng-show没有效果，即使dialogId通过链接功能在范围内设置（也是切换工作，但正如我所说它没有效果）。此外，动态生成的隐藏功能也在范围内。

我觉得这种方法存在一些普遍的错误。你能给出错误可能出现的提示或如何做得更好吗？

Answer 1

您需要编译html标记，以使角度指令生效。

在代码中：

您需要先注入$ 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属性将任何变量传递给已编译的标记。 E.g。

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

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

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

1 个答案: