AngularJS - 在模板

时间:2017-04-04 11:01:55

标签: javascript angularjs

组件绑定属性可用于控制器之前的模板

模板会显示给定的x而非2,因为模板是在调用$onInit()之前加载的,并且直接在x之外的控制器中修改$onInit()的值是不可能的,因为绑定属性仅在$onInit()

  1. 如何在模板中显示之前更新x

  2. 假设我想调用服务来根据x的给定值获取一些数据,比如y,这必须在$onInit()的值x可用,因此模板的任何获得的y值都不可用,因为模板在获得y之前加载。怎么解决这个问题?

  3. 示例:

    
    
    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;
    &#13;
    &#13;

    plnkr

    上的示例

2 个答案:

答案 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