我正在用 AngularJS 中的双向绑定(bind)编写一个带有 isolate scope 的指令。但是，我似乎无法使双向绑定(bind)起作用。无论我做什么，isolate scope 上的 populate 属性始终是 undefined(尽管该属性确实存在)，而不是它的值应该绑定(bind)到。
HTML:
<html>
<body ng-app="MyApp">
<div ng-controller="MyController">
{{data.dataProp}} <!-- demonstrates that data.dataProp is defined -->
<scope-fail data-source="data.dataProp"></scope-fail>
</div>
</body>
</html>
JS:
angular.module("MyApp", [])
.controller('MyController', function ($scope) {
$scope.data = {
dataProp: 'Some Data'
}
})
.directive('scopeFail', function ($window) {
return {
restrict: 'E',
scope: {
populate: '=dataSource'
},
template: '<div>Value: {{populate}}</div>',
link: function (scope, element, attrs) {
console.log('Scope property:', scope.populate); //prints Scope property: undefined
}
};
})
带有以上代码的 CodePen:CodePen link
那么为什么 CodePen 不显示“值:一些数据”？我认为应该发生的是 populate 绑定(bind)到自定义元素上的 data-source 的值，即 data.dataProp Controller 作用域是 Some Data。
我哪里出了问题/我怎样才能让隔离范围与数据源属性进行双向绑定(bind)？
非常感谢
最佳答案
要么改populate: '=dataSource'至 populate: '=source'或添加额外的 data- data-source 的属性前缀. AngularJS 自动剥离 data-允许有效的 html5 范围属性的属性。
关于javascript - Angular : Directive Isolated Scope Undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31393812/