Question

我有一个来自控制器的绑定doc模型的指令。但该指令没有显示该文件？

HTML：

<div ng-app="myApp">TestApp:
    <div ng-controller="TestController as Test">Testdoc controller: {{Test.doc}}
        <br>
        <test-me ng-init="abc=123" my-model="Test.doc">Testdoc directive: {{myDoc}} | {{abc}}</test-me>
    </div>
</div>

JS：

var app = angular.module("myApp", []);

app.controller("TestController", function () {
    this.doc = {
        name: 'testname',
        id: null
    };
});

app.directive("testMe", function () {
    return {
        scope: {
            myDoc: '=myModel'
        },
        link: function(scope, elem, attrs){

        }
    }
});

输出HTML仍然是：

TestApp:
Testdoc controller: {"name":"testname","id":null} 
Testdoc directive: <missing output of doc here>| 123

jsfiddle：http://jsfiddle.net/kx97y93k/14/

我做错了什么？

Answer 1

解决方法不是直接在html中调用{{myDoc}}，而是在模板中调用。

app.directive("testMe", function () {
    return {
        restrict: 'E',
        template: '<div>Testdirective: {{myDoc}}<div>',
        scope: {
            myDoc: '=myModel'
        },
        link: function(scope, elem, attrs){

        }
    }
});

请参阅更新的jsfiddle：http://jsfiddle.net/kx97y93k/18/

非常感谢@Mr_Green的提示

Answer 2

向DDO添加限制：'E'，见下文。 Angular 1.2使用restrict：'A'如果没有另外明确设置。对于Angular 1.3而言，它变成了“EA”并且你的指令会起作用。要使它在你的小提琴中起作用，请按如下方式进行更改：

app.directive("testMe", function () {
return {
    restrict : 'E',
    scope: {
        myDoc: '=myModel'
    },
    link: function(scope, elem, attrs){

    }
}
});

为什么这个angularjs指令不显示绑定文档？

2 个答案: