Создание и инициализация контроллера в AngularJS

Question

У меня проблема с управляющим контроллером с угловым. У меня есть главный контроллер 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», когда я нажимаю кнопку «Добавить», текст «Новый тип» (инициализированный в контроллере) не появляется.

Я думаю, что речь идет о сфере действия или что-то в этом роде, но я не могу найти, как это исправить.

Я хотел знать, правильный ли этот метод, и как я могу исправить проблему, которую я имею.

Благодаря

Answer 1

Чтение кода, я понимаю, что вы хотите создать typedefs динамически и те typedef элементы должны контролироваться с помощью AlkeTypeDefController.

В этом случае я хотел бы создать AlkeTypeDefController используя ng:controller директиву, так что вам не нужно создавать контроллер программно, потому что тогда вам нужно будет прикрепили его к виду, и это именно то, что ngController директива делает для вас.

Примечание AlkeTypeDefListController не создает AlkeTypeDefController контроллера, это сделано в целях

Demo on 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 eleme нт):

<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 затем украшает эту область с функциями и значениями.

Я надеюсь, что это помогает

Answer 2

При вызове $ контроллер («AlkeTypeDefController») будет по существу называть new на конструктору AlkeTypeDefController и дать вам обратно возвращаемое значение не масштаб. Вы назначаете атрибут name области видимости, хотя в вашем html-адресе он не доступен, если у вас есть typedef.name.

Попробуйте изменить AlkeTypeDefController к этому:

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

Тогда вы можете создать его экземпляр с: 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> 

Если вы хотите контроллер, то вы можете использовать один в Direc вместо функции связывания.