[AngularJS]AngularJS 中嵌套指令的格式化程序

发布时间: 2017/4/16 21:02:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我真的很奇怪的问题,关于格式化程序对嵌套的指令。

我想要一个 modelType 指令格式。
如果我不检查"modelType",它的工作。
所有视图值都更改为"格式:......"。

但是,如果我执行 if (attrs.modelType == "testType") { ... } 它不会工作,但我不知道为什么。

myApp.directive('modelType', function(){
return {
restrict: 'A',
require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      if(attrs.modelType == "testType") {
      ngModel.$formatters.push(function(value){
        //formats the value for display when ng-model is changed
        return 'Formatted: ' + value; 
      });
      ngModel.$parsers.push(function(value){
        //formats the value for ng-model when input value is changed
        return value.slice(11); 
      });
    }
  }
};

有谁知道这一问题?

http://jsfiddle.net/nkop2uq0/2/

解决方法 1:

首先,使用属性 model-type 都在外部和内部指令导致内部的链接功能得到执行两次 (一次为控制器拥有的 HTML,一次 HTML 模板),覆盖您的格式设置。所以,你需要 (或至少我认为你应该) disentagle 通过使用内部指令的不同属性的两个指令的属性︰

 template: '<div><input type="text" ng-model="ngModel" my-type="modelType" /></div>'

因此重命名了内部指令

 myApp.directive('myType', function(){ 

下一步,因为内部指令现在并不再被外面一个编译步骤,您需要编译中你后链接功能的内部指令的模板

这可以这样做︰

 link: function (scope, element){
    $compile(element.innerHtml)(scope)
 }

这导致了 attrs 人总是相同,所以您不能使用它来测试你 testType :

$$element: U[1]
$$observers: Object
$attr: Object
myType: "modelType"  <-- see here
ngModel: "ngModel"
type: "text"

因此你需要寻找里面的实际值 scope :

if(scope.modelType == "testType") {

最后 (和坦率地说,我会很高兴如果有人能给我解释,我也不懂),我不得不定义 modelType 作为通过单向绑定范围外的指令中的属性

modelType: '@modelType'

我在这一起更新的小提琴︰ http://jsfiddle.net/nkop2uq0/8/

NB︰ 我很不理解错综复杂的角的指令。就像我喜欢框架,多种方式可以实现的事情是令人难以置信。所以你应该尽量提高我的答案,它是最有可能不是最好的实践。和给我写信,如果你发现坏的想法在那里......

赞助商