AngularJS 在指令中调用控制器

Question

到目前为止，我正在尝试遵循一个相当不错的教程，但我有点卡在需要创建指令以分离 html 块并使用的部分生成数据的控制器。

var app = angular.module('newModule',[]);

app.directive('stateView', function(){
    return{
        restrict: 'E',
        templateUrl: 'state-view.html',
        controller: 'stateController',
        controllerAs: 'stateCtrl'
    }
});


 app.controller('stateController',function(){
     this.addStateTo = function(country){
         if(!country.states){
         country.states = [];
         }
         country.states.push({name: this.newState});
         this.newState = "";
     };
 });

我的 HTML stateview 看起来像这样（C 是来自另一个控制器的值，用于遍历其他对象列表）。

<div>
    <input type="text" name="state" ng-model="stateCtrl.newState">
    <a href ng-click="stateCtrl.addStateTo(c)"> Add State {{ stateCtrl.newState }}</a>
</div>

我索引中唯一的 HTML 参考如下：

<state-view></state-view>

它看起来很干净，但问题是它不会重新调整函数 addStateTo，除非我告诉 DIV 元素它是名为 StateController 的 ng-controller。这不是指令告诉 HTML 属性的内容吗？

Answer 1

试试这个（$scope 而不是 this）：

app.controller('stateController',function($scope){
    $scope.addStateTo = function(country){
        if(!country.states){
          country.states = [];
        }
        country.states.push({name: this.newState});
        $scope.newState = "";
    };
});

或

app.controller('stateController',function(){
    var vm = this;
    vm.addStateTo = function(country){
        if(!country.states){
          country.states = [];
        }
        country.states.push({name: this.newState});
        vm.newState = "";
    };
});

Answer 2

您正在使用 ControllerAs 语法并适当地引用控制器上下文（即 stateCtrl.newState 和 stateCtrl.addStateTo(c)）。问题是您没有正确创建控制器上下文。您的控制器代码应如下所示：

app.controller('stateController', function() {
  var vm = this;

  this.addStateTo = function(country) {
    if (!country.states) {
      country.states = [];
    }
    country.states.push({
      name: vm.newState
    });
    vm.newState = "";
  };
});

工作示例here

Answer 3

尝试在您的指令中添加 bindto controller true。而且上述答案在解决您可能运行遇到的其他问题时也是正确的，即将您的 this 映射到函数，尽管目前不这样做可能不会导致问题。

var app = angular.module('newModule',[]);

app.directive('stateView', function(){
    return{
        restrict: 'E',
        templateUrl: 'state-view.html',
        controller: 'stateController',
        controllerAs: 'stateCtrl',
        bindToController: true
    }
});


 app.controller('stateController',function(){
     var vm = this;
     vm.addStateTo = function(country){
         if(!country.states){
         country.states = [];
         }
         country.states.push({name: vm.newState});
         vm.newState = "";
     };
 });

AngularJS 在指令中调用控制器

AngularJS calling a controller in a directive

html

javascript

controller

directive

angularjs