带有隔离范围的指令绑定有时不在范围内

时间:2017-10-04 15:21:56

标签: javascript angularjs angularjs-directive angularjs-scope

所以我有指令隔离范围 controllerAs 模式。

    var directive = {
        restrict: 'E',
        scope: {
            something: '='
        },
        templateUrl: './App/directiveTemplate.html',
        controller: directiveController,
        controllerAs: 'vm',
        bindToController: true
    }

并在控制器中初始化,使用 $ http 调用REST服务,返回一个promise。

 function directiveController(someService) {

    var vm = this;

    // Here vm.something is defined and bound to the appropriate model set where the directive is used

    init()

    function init() {
        return someService.getProducts()
        .then(productsReady);

        function productsReady(response) {
            vm.products = response;
            //find product using vm.something

            // here vm.something is undefined

           return vm.products;
        }
    }

问题在于,如果我在init()方法vm.something之前定义了断点,那么它应该是productsReady函数,但它是未定义的。

这是正常行为吗?承诺是否在不同的范围内解决代码?

1 个答案:

答案 0 :(得分:1)

使用$onInit Life-Cycle Hook来保证绑定的时间:

 function directiveController(someService) {

    var vm = this;

    ̶i̶n̶i̶t̶(̶)̶

    this.$onInit = init;

    function init() {
        return someService.getProducts()
        .then(productsReady);

        function productsReady(data) {
            vm.products = data;

           return vm.products;
        }
    }

来自文档:

  

依赖于存在的绑定的初始化逻辑应该放在控制器的$onInit()方法中,保证在分配之后始终被称为。< / p>

.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    this.$onInit = function() {
      // `this.value` will always be initialized,
      // regardless of the value of `preAssignBindingsEnabled`.
      this.doubleValue = this.value * 2;
    };
  }
})
     

— AngularJS Developer Guide - Migrating to V1.6 - $compile