gpt4 book ai didi

javascript - 如何在 Angular 指令中的模板上渲染范围变量

转载 作者:行者123 更新时间:2023-12-03 07:52:55 24 4
gpt4 key购买 nike

[更新]事实证明,如果我使用“@”作为作用域变量,则在渲染模板时将以异步方式使用它(我仍然不知道为什么以及如何),顺序将是编译的 -> Controller ->前 ->后 ->观察,奇怪的是直到POST阶段,scope.data仍然是对象,但在观察中,它突然变成字符串,有人可以给我一些关于为什么会发生这种情况的帮助吗(就像当模板获取数据绑定(bind)到它时)?

var app = angular.module("vp", []);
app
.controller("main", function($scope){
$scope.data = ["1", "2"];
})
.directive("chartBuilder", function(){
return {
restrict: "AE",
scope: {
data: "@data"
},
controller: function($scope){
console.log($scope.data);
$scope.data = JSON.parse($scope.data);
},
template: '<div><input ng-repeat="d in data track by $index" ng-model="data[$index]" /></div>',
compile: function(EL, attrs){
console.log(EL);
return {
pre: function(scope, EL, attrs){
console.log(scope.data);
},
post: function(scope, EL, attrs){
// link: function(scope, EL, attrs){
console.log(scope.data);
attrs.$observe("data", function(d){
console.log(d);
scope.data = JSON.parse(scope.data);
console.log(d);
})
}
}
}
};
});
<小时/>

全部:

我对 Angular 指令还很陌生,假设我有一个接受来自父作用域的 attr 的指令:

<html ng-app="vp">
<head>
<title></title>
</head>
<body ng-controller="main">

<input ng-repeat="d in data track by $index" ng-model="data[$index]" />

<chart-builder data={{data}}></chart-builder>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("vp", []);
app
.controller("main", function($scope){
$scope.data = ["1", "2"];
})
.directive("chartBuilder", function(){
return {
restrict: "AE",
scope: {
data: "@"
},
controller: function($scope){
$scope.data = JSON.parse($scope.data);
},
template: '<div><input ng-repeat="d in data track by $index" ng-model="data[$index]" /></div>',
link: function(scope, EL, attrs){
}
};
});
</script>

</body>
</html>

请注意,我在指令中使用了“@”,原因是我想设置如下逻辑:

父作用域可以影响指令中的值,但在指令中,只允许从父作用域复制数据,其内部的任何更改都不能反射(reflect)到父作用域。

例如,init父作用域数据是[1,2],因此指令会将其获取为字符串(因为@),并在 Controller 中将其转换为对象,然后在模板上渲染。

但事实是:

指令中的数据在模板上呈现时仍然是字符串,我想知道为什么 JSON.parse 不起作用(在指令的 Controller 中,它确实起作用,但是当绑定(bind)到模板时,它仍然是字符串)

谢谢

最佳答案

只需传入数组引用就简单得多:

<chart-builder data="data"></chart-builder>

JS

 app
.controller("main", function($scope){
$scope.data = ["1", "2"];
})
.directive("chartBuilder", function(){
return {
restrict: "AE",
scope: {
data: "="
},
controller: function($scope){
console.log($scope.data)// array not string ["1", "2"]
},
template: '...',
link: function(scope, EL, attrs){
}
};
});

关于javascript - 如何在 Angular 指令中的模板上渲染范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34931618/

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