Question

如何在没有远程模板的客户指令中使隔离范围工作？

以下内容对我不起作用。

AnularJS

app.directive('emanForm', ['$http', 'db', function ($http, db) {
    return {

        scope: { },

        link: function ($scope, element, attrs) {

            $scope.message = 'test';

        }

    };
}]);

HTML

<form name="form_1" eman-form="form1">
    {{ message }}
</form>

$ scope似乎仅在我包含远程模板时才可用。 templateUrl: 'view.html'等......

Answer 1

这里的问题不是远程与本地模板，而是子DOM与模板中的表达式。

托管指令的元素的子元素不在该指令创建的范围内 - 它们和指令是用于范围目的的兄弟。

因此，{{message}}将在父母的范围内进行评估。

将这些元素纳入范围＆＃34;需要使用$compile：

link: function(scope, element){
  $compile(element.contents())(scope);  
}

修改

上面的方法导致内容被编译两次 - 一次是在正常的编译过程中，第二次是$compile。这当然是次优的。

为了避免这种情况，需要手动方法$compile并删除指令compile函数中元素的内容，然后链接已编译的内容并添加/追加它们是link函数中的元素。

而不是这个，Angular提供了转换。当transclude: true（或transclude: 'element'）时，内容将被编译一次，并且绑定到transclude函数指定的作用域的被转换内容的克隆可以放在任何位置。

transclude: 'element', link: function(scope, element, attrs, ctrls, transcludeFn){ // bind to the directive's scope transcludeFn(scope, function(clone){ // element here is the comment element left after transclusion element.after(clone); });

如何在没有远程模板的客户AngularJS指令中访问隔离的$ scope

1 个答案: