AngularJS：指令隔离范围未定义 [英] AngularJS : Directive Isolated Scope Undefined
问题描述
我写与分离范围指令具有双向的 AngularJS 绑定。不过，我似乎无法获得双向绑定工作。无论我做什么，在填充在分离范围属性始终是未定义（虽然属性确实存在），而不是被它应该值绑定到。
I am writing a directive with an isolate scope with a two-way binding in AngularJS. However, I cannot seem to get the two-way binding to work. No matter what I do, the populate property on the isolate scope is always undefined (although the property does exist) instead of being the value it's supposed to be bound to.
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以上$ C $ C： codePEN链接
那么，为什么不是codePEN秀价值：一些数据？我认为是应该发生的是，填充结合数据源的是自定义元素的值 data.dataProp 在控制器范围是一些数据。
So why doesn't the CodePen show "Value: Some Data"? What I think is supposed to happen is that populate binds to the value of data-source on the custom element which is data.dataProp on the controller scope which is Some Data.
我在哪里与此去错/我如何能得到隔离范围，有一个双向的数据源属性绑定？
Where am I going wrong with this/how can I get the isolate scope to have a two-way binding with the data-source attribute?
感谢你这么多。
推荐答案
要么改变填充：'=数据源'到填充：'=源或添加一个额外的数据 - 属性preFIX到数据源。自动AngularJS剥离数据 - 属性，以便有效的HTML5范围属性。
Either change populate: '=dataSource' to populate: '=source' or add an extra data- attribute prefix to data-source. AngularJS automatically strips the data- attribute to allow for valid html5 scoped attributes.
这篇关于AngularJS：指令隔离范围未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
