组件绑定属性可用于控制器之前的模板。
模板会显示给定的x
而非2,因为模板是在调用$onInit()
之前加载的,并且直接在x
之外的控制器中修改$onInit()
的值是不可能的,因为绑定属性仅在$onInit()
如何在模板中显示之前更新x
?
假设我想调用服务来根据x
的给定值获取一些数据,比如y
,这必须在$onInit()
的值x
可用,因此模板的任何获得的y
值都不可用,因为模板在获得y
之前加载。怎么解决这个问题?
示例:
var app = angular.module('myApp', []);
app.component('comp', {
bindings : { x : '<'},
controller : function(){
this.y;
$onInit = function(){
this.x = 2;
YService.getY(this.x).then(function(response){
this.y = response.data;
});
};
},
template : '<h1>x: {{$ctrl.x}}, y: {{$ctrl.y}}</h1>'
});
app.service('YService', function () {
var service = {
getY : function(x) {
return x*2;
}
};
return service;
});
&#13;
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='myApp'>
<comp x=4></comp>
</body>
</html>
&#13;
上的示例
答案 0 :(得分:0)
您可以尝试使用if条件将模板加载到h1标记,如下所示吗?
ng-if =“{{$ ctrl.x}}”
在其他情况下,您可以在ng-if ..
上使用“y”答案 1 :(得分:0)
要引用控制器内部的绑定变量,您需要参考函数上下文并使用 this 而不是'x',运行此片段的客户端代码将抛出错误'x is undefined'。
此外,您的语句很少是错误的,通过引用函数上下文,您可以在控制器函数内的任何位置访问组件的绑定,而不是将组件生命周期函数限制为 $ onInit,$ onChanges,$ doCheck, $ postLink和$ onDestroy 。
理解模板加载之前因此无法看到绑定或任何控制器,作用域变量,或者看不到AJAX调用中设置的变量,都不是真的。简单来说,如果是这样的话,AngularJS永远不会工作。为了渲染组件,AngularJS加载模板,是的,然后用组件范围编译它,并创建我们称之为双向绑定的链接,因此组件控制器内部的更改将反映在视图中。我建议您在这里阅读有关AngularJS组件的一些内容:https://docs.angularjs.org/guide/component。