为什么`controllerAs`在JavaScript中工作，但不是'NG控制器= ...如...`在HTML？ [英] Why does `controllerAs` in JavaScript work but not `ng-controller=...as...` in HTML?

问题描述

本作品：

Plunker controllerAs在JS

Plunker controllerAs in js

输入form.html

input-form.html

<form name="inputForm" ng-submit="inputForm.$valid && inputCtrl.emitData()" novalidate>
  <textarea name="topic1Data" ng-model="inputCtrl.inputValues.topic1Data" rows="10" cols="30" required></textarea>
  <button type="submit" class="btn btn-info btn-lg" ng-disabled="!inputForm.$valid">Compare</button>
</form>

inputForm.js

inputForm.js

"use strict";

(function() {
  var inputForm = angular.module('input-form', []);

  inputForm.directive('inputForm', function() {
    return {
      restrict: 'E',
      templateUrl: 'input-form.html',
      scope: {data: "="},
      controllerAs: 'inputCtrl',
      bindToController: true,
      controller: function() {
        var inputCtrl = this;
        inputCtrl.inputValues = {topic1Data: 123456789};

        inputCtrl.emitData = function() {
          inputCtrl.data =  inputCtrl.inputValues.topic1Data;
        };
      }
    };
  });
})();

来源：<一个href=\"http://stackoverflow.com/a/29558554/2848676\">http://stackoverflow.com/a/29558554/2848676

这不工作：

Plunker控制器在HTML

Plunker controller as in html

输入form.html

input-form.html

<form name="inputForm" ng-controller="InputController as inputCtrl" ng-submit="inputForm.$valid && inputCtrl.emitData()" novalidate>
  <textarea name="topic1Data" ng-model="inputCtrl.inputValues.topic1Data" rows="10" cols="30" required></textarea>
  <button type="submit" class="btn btn-info btn-lg" ng-disabled="!inputForm.$valid">Compare</button>
</form>

inputForm.js

inputForm.js

"use strict";

(function() {
  var inputForm = angular.module('input-form', []);

  inputForm.directive('inputForm', function() {
    return {
      restrict: 'E',
      templateUrl: 'input-form.html',
      scope: {data: "="},
      bindToController: true
    };
  });

  inputForm.controller('InputController', function(){
    var inputCtrl = this;
    inputCtrl.inputValues = {topic1Data: 123456789};

    inputCtrl.emitData = function() {
      inputCtrl.data =  inputCtrl.inputValues.topic1Data;
    };
  });
})();

我发现了一个文章帕斯卡尔$ P这似乎说的解决办法是$ pcht bindToController 但我使用 bindToController 和它doesn' ŧ工作还。

I found an article by Pascal Precht that seemed to say the solution was bindToController but I'm using bindToController and it doesn't work still.

在 controllerAs 为什么在JavaScript的工作，而不是 NG-控制器= ...因为... 在HTML？

How come the controllerAs in the JavaScript works but not the ng-controller=...as... in HTML?

推荐答案

bindToController 该指令定义对象上定义的控制器工作：

bindToController works with a controller defined on the directive definition object:

.directive("foo", function(){
  return {
    //..
    bindToController: true,
    controller: "FooCtrl",
    controllerAs: "foo"
  };
});

在换句话说，当 $编译服务运行和编译指令/链接，它收集的指令和绑定到 directive.controller 对象。这就是控制器绑定到隔离作用域属性。

In other words, when $compile service runs and compiles/links the directives, it collects the directives and binds to a directive.controller object. That is the controller that "binds" to the isolate scope properties.

在你的情况，你认为（错误地），一个控制器在模板中定义的 NG-控制器=FooCtrl为富会以同样的方式工作。没有为这一假设没有根据，而且你链接的文章，从未表示作为一个选项。

In your case, you assumed (incorrectly) that a controller defined in the template with ng-controller="FooCtrl as foo" would work in the same manner. There is no basis for that assumption and the article that you linked to never showed that as an option.

模板可以实例众多的控制器，何况模板可以异步加载（使用 templateUrl ），因此 bindToController 从未打算以这样的方式被使用。

The template can instantiate numerous controllers, not to mention that a template could be loaded asynchronously (with templateUrl), so the bindToController was never meant to be used in such a manner.

这篇关于为什么`controllerAs`在JavaScript中工作，但不是'NG控制器= ...如...`在HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！