为什么 JavaScript 中的 `controllerAs` 可以工作，而 HTML 中的 `ng-controller=...as...` 不行? [英] Why does `controllerAs` in JavaScript work but not `ng-controller=...as...` in HTML?

问题描述

这有效:

js中的Plunker控制器

input-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;
        };
      }
    };
  });
})();

来源:https://stackoverflow.com/a/29558554/2848676

这不起作用:

如 html 中的 Plunker 控制器

input-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;
    };
  });
})();

我发现了一篇 Pascal Precht 的文章 似乎在说解决方案是 bindToController 但我正在使用 bindToController 并且它仍然不起作用.

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.

为什么 JavaScript 中的 controllerAs 有效，而 HTML 中的 ng-controller=...as... 无效?

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"
  };
});

换句话说，当 $compile 服务运行并编译/链接指令时，它会收集指令并绑定到 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-controller="FooCtrl as foo" 定义的控制器将以相同的方式工作.该假设没有根据，您链接的文章从未将其作为选项显示.

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.

这篇关于为什么 JavaScript 中的 `controllerAs` 可以工作，而 HTML 中的 `ng-controller=...as...` 不行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！