javascript - 在 AngularJS 中实例化和初始化 Controller

Question

我在使用 Angular 实例化 Controller 时遇到问题。我有一个主 Controller AlkeTypeDefListController，我想从中动态创建/删除 AlkeTypeDefController 类型的 Controller ，所以我这样做了:

AlkeTypeDefListController代码:

//  Create main controller          
Alke.controller('AlkeTypeDefListController', ['$scope', '$controller', function($scope, $controller)
{
    var primitives = 
    [

    ];

    //  Add some properties to the scope
    angular.extend($scope,
    {
        typedefs        : primitives,
        addTypeDef      : function()
        {            
            var controller = $controller("AlkeTypeDefController", {$scope:$scope.$new()});
            $scope.typedefs.push(controller);
        }             
    });   
}]);

AlkeTypeDefController代码:

//  Create main controller          
Alke.controller('AlkeTypeDefController', ['$scope', '$controller', function($scope, $controller)
{
    //  Add some properties to the scope
    angular.extend($scope,
    {
        name            : "New Type",
        fields          : [],
        addField        : function()
        {

        }  
    });  
}]);

html代码是这样的:

<div id="typedefs-editor" ng:controller="AlkeTypeDefListController">
    <button ng:click="addTypeDef()">Add</button>
    <button>Remove</button>
    <div id="typedef-list">
        <ul class="list">
        <li ng:repeat="typedef in typedefs"><a href="#">{{typedef.name}}</a></li>                               
        </ul>
    </div>
</div>

问题并不真正来自实例化(工作正常)，而是来自初始化。事实上，当我按下“添加”按钮时出现新的“li”时，文本“New type”(在 Controller 中初始化)不会出现。

我认为这与范围或类似问题有关，但我真的找不到解决方法。

我想知道这个方法是否正确，以及如何解决我遇到的问题。

谢谢

Answer 1

阅读代码，我了解到您想动态创建 typedef 并且那些 typedef 项必须由 AlkeTypeDefController 控制。

在这种情况下，我会使用 ng:controller 指令创建 AlkeTypeDefController，因此您不需要以编程方式创建 Controller ，因为那样您就需要附加它到 View ，而这正是 ngController 指令为您所做的。

注意 AlkeTypeDefListController 不会创建一个 AlkeTypeDefController Controller ，这是在 View 中完成的

Demo on Plunker

Controller :

.controller('AlkeTypeDefListController', ['$scope', function($scope) {
    var primitives = [];

    $scope.typedefs = primitives;

    $scope.addTypeDef = function() { 
      var typeDef = { name: 'New Type' };
      $scope.typedefs.push(typeDef);
    }
}])

.controller('AlkeTypeDefController', ['$scope', function($scope) {
    $scope.addField = function() {
      alert('add Field');
    }
}]);

View (注意 ng-controller 指令是如何在 li 元素中指定的):

<div id="typedefs-editor" ng:controller="AlkeTypeDefListController">
  <button ng:click="addTypeDef()">Add</button>
  <button>Remove</button>
  <div id="typedef-list">

  <ul class="list">
      <li ng:repeat="typedef in typedefs" ng:controller="AlkeTypeDefController">
        <a href="#" ng-click="addField()">{{typedef.name}}</a>            
      </li>                               
  </ul>
</div>

在上面的代码中，ngRepeat 将为每个 typedef 创建一个新的 $scope。 AlkeTypeDefController 然后用函数和值装饰该作用域。

希望对你有帮助