与模型拦截/过滤功能角指令

Question

我有一个包裹ngTagsInput

在任何情况下，我的源数据结构是一样的自定义指令，但在一个特定的场景我需要改变保存回数据服务器以动态的方式。

我的标签一般都在格式{id: '123', name: 'Some Text'}但在我们的数据库中的一个特殊领域，我需要将数据按以下格式{id: 'some-text', name: 'Some Text'}

目前我刚刚更新ng-model与选定的标签映射。

更新ng-model

我创建了一个Plunkr

例

我之前我想拦截选择的标签，同时改变'123' ID，以'some-text'的在解决如何将拦截器添加到角上时遇到问题ř指令

页控制器

app.controller('MainCtrl', function($scope) { 

    $scope.model = { 
    skills: [], 
    desired_skills: [] 
    }; 

    $scope.dashed = function(value) { 
    var result = _ 
     .words(value) 
     .map(function(x) { return x.toLowerCase(); }) 
     .join('-'); 

    //console.log(result); 
    return result; 
    } 

    $scope.intercept = function(item) { 
    console.log('item: ' + JSON.stringify(item)); 

    return { id: $scope.dashed(item.name), name: item.name }; 
    } 

}) 

指令控制器

.controller('SkillTagInputController', ['$scope', '$filter', '$q', function($scope, $filter, $q) { 


    $scope.loadTags = function (name) { 
    return [ 
     {id: 5, name: "Some Text"}, 
     {id: 6, name: "More Text"}, 
     {id: 7, name: "Something Else"} 
    ] 
    }; 

}]) 

指令

.directive('wkSkillTagInput', [ 
    function() { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     scope: { 
     ngModel: '=', 
     wkOnAddInterceptor: '&' 
     }, 
     template: '<tags-input \ 
      ng-model="innerModel" \ 
      ng-change="onChange()" \ 
      add-on-paste="true" \ 
      display-property="name" \ 
      add-from-autocomplete-only="true" \ 
      replace-spaces-with-dashes="false"> \ 
       <auto-complete source="loadTags($query)" min-length="2"></auto-complete> \ 
      </tags-input>', 

     controller: 'SkillTagInputController', 
     link: function(scope, element, attrs, ngModel) { 
     if (!ngModel) { 
      return; 
     } 

     // invoked when model changes from the outside 
     ngModel.$render = function() { 
      scope.innerModel = ngModel.$modelValue; 
     }; 

     // invoked when model changes from the inside 
     scope.onChange = function() { 
      if (scope.wkOnAddInterceptor) { 
      // This is the area I need to get working 
      // The intercepter should get called and change the nagure of the selected item 
      //ngModel.$setViewValue(scope.$eval(scope.wkOnAddInterceptor)); 
      ngModel.$setViewValue(scope.innerModel); 
      } else { 
      ngModel.$setViewValue(scope.innerModel); 
      } 
     }; 
     } 
    }; 
    } 
]) 

Answer 1

首先，在所有的主要问题是不存在的onChange方法NG-标签输入，你可以检查文档的详细信息http://mbenford.github.io/ngTagsInput/documentation/api

在这种plunker，我用onTagAdding代替的onChange时，其他变化是拦截器被调用的方式。当您将函数传递给作用域中的指令时，函数总是被定义，那么如果您检查if（scope.wkOnAddInterceptor）总是返回true。这是代码的一部分：

scope.onTagAdding = function($tag) { 
     var tag = scope.wkOnAddInterceptor({item: $tag}) 
     $tag.id = tag ? tag.id : $tag.id; 
     return true; 
    } 

另一个错误（外部的主要问题），是在ngModel $渲染，你分配模型的参考，在这种情况下工作，因为要初始化。与空数组型号：

$scope.model = { 
    skills: [], 
    desired_skills: [] 
    }; 

我建议你检查的模式，做一个干净的副本，并与ngModelCtrl的内部方法的工作。这篇文章很好地解释了ngModelCtrl流程http://www.chroder.com/2014/02/01/using-ngmodelcontroller-with-custom-directives/