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

我无法将控制器实例化为角度。我有一个主控制器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);
        }             
    });   
}]);

//  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()
        {

        }  
    });  
}]);

烷酮基控制器的代码：

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

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

我认为这是关于范围之类的，但我真的找不到如何解决这个问题

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

---

感谢阅读代码，我知道您希望动态创建

typedef

，并且那些

typedef

项必须由

AlkeTypeDefController

控制

在这种情况下，我将使用

ng:controller

指令创建

AlkeTypeDefController

，因此您不需要以编程方式创建控制器，因为这样您就需要将其附加到视图，而这正是

ngController

指令为您所做的

请注意，

AlkeTypeDefListController

不会创建

AlkeTypeDefController

控制器，这是在视图中完成的

控制器：

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

查看（注意

ng controller

指令是如何在

li

元素中指定的）：

添加
去除

在上面的代码中，

ngRepeat

将为每个

typedef

创建一个新的

$scope

<代码>AlkeTypeDefController然后用函数和值装饰该范围

我希望它能帮助您

当您调用$controller（“AlkeTypeDefController”）时，它实际上会调用AlkeTypeDefController构造函数上的

new

，并返回返回值而不是范围。您需要将

名称

属性分配给作用域，但当您拥有

typedef.name

时，不会在html中访问该属性

尝试将AlkeTypeDefController更改为：

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

---

然后可以使用以下命令对其进行实例化：

var controller=$controller（“AlkeTypeDefController”）如果我正确理解您的意思，那么我想我应该尝试利用自定义指令的功能，而不是动态生成控制器


控制器：

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

Alke.directive（'alkeTypeDef'，function（）{
返回{
限制：“A”，
范围：{
typeDef:'=alkeTypeDef'
},
模板：“”，
链接：功能（范围、元素、属性）{
变量属性={
字段：[]，
addField:function（）{
}
};
角度扩展（范围、属性）；
}
};
});

HTML:


添加
去除




如果需要控制器，则可以在指令中使用控制器，而不是使用链接函数