6

我在使用 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”时，文本“新类型”（在控制器中初始化）并没有出现。

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

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

谢谢

4

3 回答 3

6

阅读代码，我了解您想要typedefs动态创建并且这些typedef项目必须由AlkeTypeDefController.

在这种情况下，我将创建AlkeTypeDefControllerusingng:controller指令，因此您无需以编程方式创建控制器，因为您需要将其附加到视图中，而这正是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');
    }
}]);

查看 （注意如何在元素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中，将为$scope每个typedef. AlkeTypeDefController然后用函数和值装饰该范围。

我希望它有帮助

于 2014-02-23T00:44:06.973 回答
2

当您调用 $controller("AlkeTypeDefController") 时，它实际上会调用newAlkeTypeDefController 构造函数并返回返回值而不是 scope。您将属性分配给name范围，因此当您拥有typedef.name.

尝试将您的 AlkeTypeDefController 更改为：

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

然后你可以用: 实例化它，var controller = $controller("AlkeTypeDefController");你不应该担心创建嵌套范围。

于 2014-02-27T01:16:26.533 回答
2

如果我得到你所说的正确，那么我想我会尝试在这里利用自定义指令的力量，而不是动态生成控制器。

笨蛋

控制器：

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>

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

于 2014-03-01T03:58:36.363 回答