带指令的Angular ngModel

问题描述：

我想把一个对象传递给一个可以更新这个值的指令。到目前为止，我有以下几点：带指令的Angular ngModel

<competence-select ng-model="module.selectedCompetence"></competence-select>

指令

angular.module('Competence').directive("competenceSelect", ['competenceService', function (competenceService) { 
    return { 
     restrict: "E", 
     templateUrl: 'js/modules/Competence/directives/competence-select/competence-select.html', 
     require: 'ngModel', 
     link: function (scope, element, attr, ngModel) { 
      ngModel.$setViewValue = scope.competenceList; 
      scope.competences = []; 


    competenceService.getCompetenceList().then(function (result) { 
       scope.competences = result; 
      }) 
     } 
    }; 
}]);

（注意需要）

然后我的指令HTML：

<label translate="FORMS.COMPETENCES"></label> 
<ui-select multiple reset-search-input="true" ng-model="competenceList" theme="bootstrap" 
      ng-disabled="disabled"> 
    <ui-select-match placeholder="{{ 'FORMS.COMPETENCES_PLACEHOLDER' | translate }}">{{$item.name}} 
     &lt;{{$item.competence_type_id == 1 ? 'Faglig' : 'Personlig' }}&gt;</ui-select-match> 
    <ui-select-choices group-by="someGroupFn" 
         repeat="competence in competences | propsFilter: {name: $select.search, competence_type_id: $select.search}"> 
     <div ng-bind-html="competence.name | highlight: $select.search"></div> 
     <small> 
      {{competence.name}} 
      {{ 'COMPETENCES.TYPE' | translate:{TYPE: competence.competence_type_id} }} 
     </small> 
    </ui-select-choices> 
</ui-select>

现在我想要什么要做的事很简单：

ngModel$setViewValue = scope.competence;

设置这应该设置ng-model在视图中是我在指令上设置的ng模型。从而解析变量“向上”以声明该指令：

<competence-select ng-model="module.selectedCompetence"></competence-select>

可悲的是，情况并非如此。

谁能告诉我什么是做错了吗？

显然，你需要调用'$渲染（）'更新模型，以及不只是看法。只是搜索它，发现https://jmcunningham.net/2014/08/09/angularjs-using-setviewvalue-and-render-to-update-models-forms/ – floribon

@floribon它的权利，我们需要调用。$ render （）。 [检查这里]（http://*.com/a/36858336/1147542） – Maverick

'$ setViewValue'是一个函数。 – zeroflagL

答

使这些变化在你的指令

angular.module('Competence').directive("competenceSelect", ['competenceService', function (competenceService) { 
    return { 
     restrict: "E", 
     templateUrl: 'js/modules/Competence/directives/competence-select/competence-select.html', 
     require: 'ngModel', 
     scope:{ ngModel : "=" }, 
     link: function (scope, element, attr, ngModel) { 
      ngModel.$setViewValue = scope.competenceList; 
      scope.competences = []; 


    competenceService.getCompetenceList().then(function (result) { 
       scope.competences = result; 
       scope.ngModel = scope.competences; 
      }) 
     } 
    }; 
}]);

带指令的Angular ngModel

相关推荐