看ngModel我的指令內

<custom-input-container> 
     <input ng-model="myModel1" /> 
</custom-input-container> 

<custom-input-container> 
     <select ng-model="myModel2" > 
     </select> 
</custom-input-container>

我想要做這樣的事情（如果可能的話，我想這個指令通過它在「customInput.js」分離是另一個應用模塊可用）看ngModel我的指令內

myApp.directive('customInputContainer',function(){ 
    return{ 
     restrict: 'E', 
     priority: 0, 
     link:function(scope,element,attr){ 
      scope.watch->//i want to watch the ngModel of 
      the thing inside <custom-input-container> 
      then do console.log('recipe was updated:'+thenewvalue); 
     } 
    } 
});

來源

2016-05-31 anaval

注意：每個輸入容器只有其中的一個input/select/textarea – anaval

您是否知道'transclude'及其含義？ – AranS

可悲的是...我是非常新的angularjs – anaval

沒關係，我得到它的工作是這樣

myApp.directive('customInputContainer',function(){ 
    return{ 
     restrict: 'E', 
     priority: 0, 
     link:function(scope,element,attr){ 
      var modelToWatch = element.find('input','select').attr('ng-model'); 
      scope.$watch(modelToWatch,function(newVal,oldVal){ 
        console.log('recipe updated:'+newVal); 
      }); 
     } 
    } 
});

現在唯一的問題remaning是如何進行自定義輸入容器注射到其他項目中，而無需修改我的customInput.js

來源

2016-05-31 15:33:14 anaval

要在元素指令內觀看ng-model變量，請添加一個具有所需變量名稱的屬性。

<custom-input-container recipe='myModel1'> 
     <input ng-model="myModel1" /> 
    </custom-input-container> 
    <br /> 
    <custom-input-container recipe='myModel2'> 
     Select 
     <select ng-model="myModel2" 
       ng-options="name for name in [1,2,3]"> 
     </select> 
    </custom-input-container>

然後在指令中，添加一個觀察者。

app.directive('customInputContainer',function(){ 
    return{ 
     restrict: 'E', 
     link:function(scope,element,attr){ 
      scope.$watch(attr.recipe, function(value) { 
       console.log('recipe was updated: ', value); 
      }) 
     } 
    } 
});

上述指令使用recipe屬性來確定要監視的變量。

的DEMO on JSFiddle

來源

2016-05-31 14:56:03 georgeawg

看ngModel我的指令內

回答

相關問題