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

Why does this angularjs directive not show the bound document?

本文关键字：显示 绑定 文档 指令 angularjs 为什么      更新时间：2023-09-26

我有一个指令，其中包含来自控制器的绑定文档模型。但是指令没有显示文件？

.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/

我做错了什么？

解决方案不是直接在 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的提示

将 limit ： 'E' 添加到 DDO 中，见下文。Angular 1.2 使用限制："A"，如果没有明确设置。对于成为"EA"的 Angular 1.3，您的指令将起作用。要使其在您的小提琴中工作，请按如下方式更改它：

app.directive("testMe", function () {
return {
    restrict : 'E',
    scope: {
        myDoc: '=myModel'
    },
    link: function(scope, elem, attrs){
    }
}
});
相关文章：