在AngularJS中实例化和初始化控制器

Question

我有一个问题是使用Angular实现控制器。 我有一个主控制器AlkeTypeDefListController ，我想从中动态创建/删除AlkeTypeDefController类型的控制器 ，所以我做到了：

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”（在控制器中初始化）不会出现。

我认为这是关于范围或类似的东西，但我真的无法找到如何解决这个问题。

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

谢谢

Answer 1

阅读代码，我知道你想动态创建typedefs ，那些typedef项必须由AlkeTypeDefController控制。

在这种情况下，我将使用ng:controller指令创建AlkeTypeDefController ，因此您不需要以编程方式创建控制器，因为您需要将它附加到视图，这正是ngController指令为您所做的。

注意AlkeTypeDefListController不会创建AlkeTypeDefController控制器，这在视图中完成

关于Plunker的演示

控制器：

.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');
    }
}]);

查看 （注意如何在li元素中指定ng-controller指令）：

<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用函数和值装饰该范围。

我希望它有所帮助

Answer 2

当你调用$ controller（“AlkeTypeDefController”）时，它基本上会在AlkeTypeDefController构造函数上调用new ，并返回返回值而不是范围 。 您将name attrubute分配给范围，因此当您拥有typedef.name时，不会在html中访问它。

尝试将AlkeTypeDefController更改为：

Alke.controller('AlkeTypeDefController', function() {
    this.name = "New Type";
    this.fields = [];
    this.addField = function() {};
});

然后你可以使用： var controller = $controller("AlkeTypeDefController");实例化它var controller = $controller("AlkeTypeDefController"); 而且您不必担心创建嵌套范围。

Answer 3

如果我得到你说的正确，那么我想我会尝试利用自定义指令的强大功能，而不是动态生成控制器。

plunker

控制器：

Alke.controller('alkeTypeDefListController', ['$scope', '$controller',
  function($scope, $controller) {
    var primitives = [];
    var addTypeDef = function() {
      $scope.typedefs.push({
        name: 'new name'
      });
    };
    var removeTypeDef = function(){
      $scope.typedefs.pop();
    };

    var properties = {
      typedefs: primitives,
      addTypeDef: addTypeDef,
      removeTypeDef: removeTypeDef
    };

    //  Add some properties to the scope
    angular.extend($scope, properties);
  }
]);

指示：

Alke.directive('alkeTypeDef', function() {
  return {
    restrict: 'A',
    scope: {
      typeDef: '=alkeTypeDef'
    },
    template: '<a href="#">{{typeDef.name}}</a>',
    link: function(scope, element, attr) {
      var properties = {
        fields: [],
        addField: function() {

        }
      };

      angular.extend(scope, properties);
    }
  };
});

HTML：

<div ng-app='Alke'>
  <div id="typedefs-editor" ng-controller="alkeTypeDefListController">
    <button ng-click="addTypeDef()">Add</button>
    <button ng-click="removeTypeDef()">Remove</button>
    <div id="typedef-list">
      <ul class="list">
        <li alke-type-def='typedef' ng-repeat="typedef in typedefs"></li>
      </ul>
    </div>
  </div>
</div>

如果你想要一个控制器，那么你可以在指令中使用一个而不是一个链接函数。