Question

所以我试图使用angularjs将动态模板注入页面。我最初尝试使用ng-include这很棒，但是我需要双向绑定$ scope＆amp; ng-include创建自己的本地副本，以便无法使用。

我已经尝试创建一个自定义指令来动态加载内容，这在数据被硬编码时按预期工作，但是当我尝试将变量传递给指令时，它实际上传递的是键入的内容而不是值的变量

控制器

$scope.test = 'Yes!'

指令

基本上，我希望templateUrl具有动态值

materialAdmin.directive("prospectiveModal", function () {


var dynamicUrl = function(scope, element, attributes) {

            console.log('directive')
            console.log('scope')
            console.log(scope)
            console.log('element')
            console.log(element)
            console.log('attributes')
            console.log(attributes)
            return 'views/prospectives/options/booked.html'
        };

return {
    restrict: 'EA',
    scope: {
        'test': '=test',

    }
    ,
    templateUrl: dynamicUrl

};

}）

HTML

            {{test}}}
        <div prospective-modal test="{{test}}"></div>

console.log输出低于

prospectiveModal:""
test:"{{test}}"

如果我将html更改为

<div prospective-modal test="test"></div>

然后console.log是

test:"test"

如何在指令中获取变量的值？它一定是可能的吗？

Answer 1

所以我找到了一种方法来做到这一点。

如果您在视图中调用ng-include，它将创建一个本地范围副本。但是，如果你在指令中创建它，它似乎没有。所以我做了这样的事情：

materialAdmin.directive("prospectiveModal", function () {

return {
    restrict: 'EA',
    scope: false,
    template: "<div ng-include='subMenu[subOption].path'></div>"

};

})

然后在视图中

<prospective-modal ></prospective-modal>

$scope可以访问subMenu[subOption].path，因此当更改该值时，模板也是如此。

angularjs指令，不能传递变量

1 个答案: