1

入力タグを動的に作成するディレクティブがあります。変更イベントで作成された入力の値を取得する必要があります。その代わりに、引数のname属性は未定義です。ディレクティブコントローラーで値を取得するには?$scopecontrollerng-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);
     }
   }
});
4

2 に答える 2

2

あなたが何をしたいのか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>

このプランカーをチェックしてください: http://plnkr.co/edit/7XY90LXNn6gqpP47JaCH?p=preview

于 2013-05-09T09:12:21.620 に答える
1

問題はcontrollerより前に実行されdirectiveます。したがって、コントローラーでは、 に追加された html タグではなく、$watchedにする必要があります。ただし、バインドされている状態は知っておくべきではないと思います。間違っている場合は修正してください。$scopedirectivecontrollerdirectivedirective

したがって、2 つのアプローチがあります。

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

2番目のもの：

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);
         })
     }
});
于 2013-05-12T07:17:14.620 に答える