Angularjs: привязки моделей

Question

У меня есть директива, которая динамически создает теги ввода. Мне нужно получить значения созданных входов на событие изменения. Вместо него атрибут name на аргументе $scope в controller не определен. Как получить значение ng-model в контроллере?

module.directive('createControl', function($compile, $timeout){ 
    return {   
    transclude: true, 
    restrict: 'A', 
    scope: {   
     name: '=name' 
    }, 
    link: function(scope, element, attrs){ 
     // simplified version 
     tag = '<input type="text" ng-model="name"/>' 
     element.append(html); 
    controller: function($scope){ 
     // In the controller I need to get value of created input on change event 
     console.log($scope); 
    } 
    } 
}); 

Answer 1

Я не 100% уверен, что вы хотите сделать, но я предполагаю, что это что-то вроде этого:

module.directive('createControl', function($compile, $timeout){ 
    return { 
    transclude: true, 
    restrict: 'A', 
    scope: {   
     name: '=name' 
    }, 
    link: function(scope, element, attrs){ 
     // simplified version 
     var tag = angular.element('<input type="text" ng-model="name" ng-change="changed(name)">'); 
     element.append(tag); 
     $compile(tag)(scope); 
    }, 
    controller: function($scope){ 
     // In the controller I need to get value of created input on change event 
     $scope.changed=function(name){ 
      console.log('changed to: '+name); 
     } 
    } 
    } 
}); 

Функция ссылка создает новый входной элемент, компилирует его с $compile, а затем связывает новый элемент ввода с scope. Это работает со следующей разметкой:

Hello {{myInput}}! 
<div create-control name="myInput"> 
</div> 

Заканчивать эту plunker: http://plnkr.co/edit/7XY90LXNn6gqpP47JaCH?p=preview

Answer 2

Проблема заключается в том controller выполняется раньше, чем directive. Поэтому в контроллере должно быть $watch ed $scope, а не теги html, добавленные в directive. Однако я думаю, что controller, связанный с directive, не должен знать о состоянии directive, исправьте меня, если я ошибаюсь.

Таким образом, существует два подхода:

module.directive('createControl', function($compile, $timeout){ 
    return { 
    transclude: true, 
    restrict: 'A', 
    scope: {   
     name: '=name' 
    }, 
    link: function($scope, $element, $attrs){ 
     // simplified version 
     var tag = angular.element('<input type="text" ng-model="name" ng-change="changed(name)">'); 
     $element.append(tag); 
     $compile(tag)(scope); 
    }, 
    controller: function($scope, $element, $attrs){ 
     $scope.$watch('Name', function(){    
      console.log(arguments);      
     });           
    }   
});          

Вторая:

module.directive('createControl', function($compile, $timeout){ 
    return { 
    transclude: true, 
    restrict: 'A', 
    scope: {   
     name: '=name' 
    }, 
    link: function($scope, $element, $attrs){ 
     // simplified version 
     var tag = angular.element('<input type="text" ng-model="name" ng-change="changed(name)">'); 
     $element.append(tag); 
     $compile(tag)(scope); 
     $element.find('input').on('change', function(){ 
      console.log($scope); 
     }) 
    } 
});