您需要将模板配置添加到您的指令中。
myApp.directive('myDirective', function () {
return {
scope : {
entry : "=" //what goes here to bind "This is my entry" to scope.entry?
},
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "E",
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
myApp.controller('fooController', function($scope){
$scope.foo = "BLAH BLAH BLAH!";
});
然后像这样使用你的指令:
<div ng-controller="fooController">
<!-- sets directive "entry" to "foo" from parent scope-->
<my-directive entry="foo"></my-directive>
</div>
角度将把它变成:
<div>THIS IS MY ENTRY</div>
假设您正确设置了角度并将此 JS 文件包含到您的页面中。
编辑
听起来您想要执行以下操作:
<my-directive="foo"></my-directive>
这对于 ELEMENT 指令是不可能的。但是,它具有属性指令。检查以下内容。
myApp.directive('myDirective', function () {
return {
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "A",
scope : {
entry : "=myDirective" //what goes here to bind "This is my entry" to scope.entry?
},
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
然后像这样使用它:
<div my-directive="foo"></div>
这会将传递给my-directive的值别名到一个名为entry的范围变量上。不幸的是,没有办法使用元素限制指令来做到这一点。阻止它发生的不是 Angular,而是 html5 指南使您想要做的事情变得不可能。您将不得不使用属性指令而不是元素指令。