如何分配变量的函数内的别名控制器？ [英] How to assign variables to an aliased Controller inside a function?

问题描述

（声明：的我真的不知道，如果这个问题适合的'问题'的定义＃1，因为我已经有（超过）的问题一个解决方案，我只是不的如的我已经找到了解决办法。我提前道歉，如果它恰好是这样的，欢迎的替代品。）

我创造一个Angularjs指令，我想使用控制器CTRL 语法，这样我就可以有 ctrl.property 在我的HTML，而不是一个非上下文，possibily遮蔽属性。

然而，这意味着，控制器上的功能，在HTML中访问变量需要绑定到这个。例如：

＆LT; - HTML文件：greetings.html - ＆GT;
＆LT; UL＆GT;
  ＆LT;李NG重复=在main.items项目跟踪由$指数NG绑定=项＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;


angular.module（'GreetingModule'）。指令（'问候'，函数（）{
  使用严格的;
  返回{
    限制：'E'，
    templateUrl：greetings.html'，
    控制器：功能（）{
      this.greetings = ['你好'，'霍拉'，'萨吕'];
    }，
    controllerAs：主
  }
}）;


我非常好这一点。但事情土崩瓦解当我开始使用的功能。

比方说，我需要从服务加载的问候。

angular.module（'GreetingModule'）。指令（'问候'，
    ['langService'，函数（langService）{
  使用严格的;
  返回{
    限制：'E'，
    templateUrl：greetings.html'，
    控制器：功能（）{
      this.greetings = [];      功能languages​​Loaded（LANGS）{
        对于（VAR I = 0; I＆LT; langs.length;我++）{
          this.greetings.push（LANGS [I] .greeting）;
        }
      }      langService.load（{
        回调：languages​​Loaded
      }）;
    }，
    controllerAs：'主'
  };
}]）;


这将失败。在回调的时候，当 languages​​Loaded 被称为这个未绑定，该函数将抛出一个错误， this.greetings未定义。

我找到了解决此三种方式，但我不喜欢所有三个（我真的没有任何技术上的理由不喜欢他们，他们只是的感觉的错，就像我试图做什么我不应该）：

1. 创建一个变量指向这个和使用，在功能：

VAR自我=这一点;
    // ...
    self.greetings.push（LANGS [I] .greeting）;


<醇开始=2>

传递这个在对象参数 langService.load（）：

/ *在指令* /
    langService.load（{
      目标：这个，
      回调：languages​​Loaded
    }）    / *在服务* /
    功能负荷（配置）{
      //负载的语言，则：
      config.languages​​Loaded.call（目标语言）;
    }


<醇开始=3>

阵列都绑定到这个和功能范围，所以，改变的范围变量也影响了这个变量（因为它们引用同一个数组）：

VAR问候= this.greetings = [];
    // ...
    greetings.push（LANGS [I] .greeting）;


有没有解决这个任何其他方式？假设没有一个，其中，上述的解决方案将是最正确的

解决方案

您可以绑定功能的这个到控制器：

  langService.load（{
  回调：languages​​Loaded.bind（本）
}）;
 

有关IE＆LT; 9将需要一个填充工具，因为绑定可作为的ECMAScript 5的。

(Disclaimer: I don't really know if this question fits the Stackoverflow definition of 'question', since I already have (more than) one solution for the problem, I just don't like the solutions I've found. I apologize in advance if it happens to be so, and welcome alternatives.)

I'm creating an Angularjs Directive and I'd like to use the Controller as ctrl syntax so that I can have ctrl.property in my HTML, instead of a non-contextual, possibily-shadowing property.

However, this implies that, on the Controller function, variables to be accessed in the HTML need to be bound to this. For example:

<!-- HTML file: greetings.html -->
<ul>
  <li ng-repeat="item in main.items track by $index" ng-bind="item"></li>
</ul>

angular.module('GreetingModule').directive('greetings', function() {
  'use strict;'
  return {
    restrict: 'E',
    templateUrl: 'greetings.html',
    controller: function () {
      this.greetings = ['Hello', 'Hola', 'Salut'];
    },
    controllerAs: main
  }
});

I'm very okay with this. But things fall apart when I start to use functions.

Let's say I need to load the greetings from a service.

angular.module('GreetingModule').directive('greetings',
    ['langService', function(langService) {
  'use strict;'
  return {
    restrict: 'E',
    templateUrl: 'greetings.html',
    controller: function () {
      this.greetings = [];

      function languagesLoaded(langs) {
        for (var i = 0; i < langs.length; i++) {
          this.greetings.push(langs[i].greeting);
        }
      }

      langService.load({
        callback: languagesLoaded
      });
    },
    controllerAs: 'main'
  };
}]);

This will fail. At the time of the callback, when languagesLoaded is called, this is not bound and the function will throw an error, this.greetings is undefined.

I've found three ways around this, but I dislike all three (I don't really have any technical reason for disliking them, they just feel wrong, like I'm trying to do something I'm not supposed to):

1. Create a variable pointing to this and use that in the function:

    var self = this;
    // ...
    self.greetings.push(langs[i].greeting);

2. Passing this in the object argument to langService.load():

    /* In the directive */
    langService.load({
      target: this,
      callback: languagesLoaded
    })

    /* In the service */
    function load(config) {
      // load languages, then:
      config.languagesLoaded.call(target, languages);
    }

3. Binding the array both to this and to the function scope, so that changing the scope variable also affects the this variable (since they reference the same array):

    var greetings = this.greetings = [];
    // ...
    greetings.push(langs[i].greeting);

Is there any other way around this? Assuming there isn't one, which of the above solutions would be the most correct one?

解决方案

You can bind the function's this to the controller:

langService.load({
  callback: languagesLoaded.bind(this)
});

For IE < 9 a polyfill would be needed because bind is available as of ECMAScript 5.

这篇关于如何分配变量的函数内的别名控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！