gpt4 book ai didi

javascript - Angular : Directive Isolated Scope Undefined

转载 作者:搜寻专家 更新时间:2023-11-01 04:56:47 25 4
gpt4 key购买 nike

我正在用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com