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状态视图如下所示（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 = "";
    };
});

OR

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。并且上述答案在修复您可能遇到的其他问题时也是正确的，即将此映射到函数，尽管目前不这样做可能不会导致问题。

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在指令中调用控制器

3 个答案: