javascript - angularjs 将 ngModel 从包装指令传递到包装指令

Question

我是 Angular 的新手，仍然在为自定义指令苦苦思索。

我想重用这段 HTML

<ui-select ng-model="model.selectedLanguages" multiple search-enabled="true" theme="select2" style="width: 300px;">
    <ui-select-match placeholder="Pick one...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="lang.id as lang in langs |filter: { name : $select.search }">
        <div ng-bind-html="lang.name | highlight: $select.search" ></div> 
    </ui-select-choices>
</ui-select>

通过将其包装到我的自定义指令中:

<language-picker ng-model="model.selectedLanguages"/>

是这样的:

app.directive('languagePicker', function() {
            return {
                template : '<ui-select ng-model="**PARENT'S NGMODEL**" multiple search-enabled="true" theme="select2" style="width: 300px;"><ui-select-match >{{$item.name}}</ui-select-match><ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"><div ng-bind-html="lang.name | highlight: $select.search"></div></ui-select-choices></ui-select>',
                restrict : 'E',
                require : 'ngModel',
                replace : true
                    ....
            };
        });

但是如何将 ngModel 从我的 language-picker 传递到 ui-select 指令？

更新

使用下面的建议，我让它与 ui-select 一起工作，但外部模型根本没有更新，请参见 plnkr.co/edit/Y43dmMGIc5GxM9fLoNPW ，可能是因为它的子作用域和父作用域保持不变？

更新 2

我让它以一种对我来说很可怕的复杂方式工作，因为我不知道为什么它首先“工作”(看看 Controller 中发生的奇怪事情):

app.directive('languagePicker', function(LanguageService) {
            return {
                templateUrl : 'LanguagePickerTpl.html',
                restrict : 'E',
                scope : {
                    languages : '='
                }, 
                controller : function($scope, LanguageService) {
                    console.log($scope);
                    $scope.langs = LanguageService.get();
                    $scope.model = $scope;
                }

            };
        })

模板:

<ui-select ng-model="model.languages" multiple search-enabled="true" 
  theme="select2" style="width: 300px;">
    <ui-select-match>{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }">
      <div ng-bind-html="lang.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

如果有人能解释发生了什么，我会很高兴(“工作”示例在这里 http://plnkr.co/edit/B53F9sc7UGkj0uxUpC17)

Answer 1

ng-model有一些特殊处理，请参阅 here在“自定义控件示例”标题下。步骤是:

1. 我建议您使用隔离作用域；它使您的组件的界面更清晰，并使您免受副作用的影响。在这种情况下，您想传递可用选项(语言)列表:

   scope: {
       langs: '='
   }
   

   用法是:

   <language-picker ng-model="model.selectedLanguages" langs="langs"/>
   

2. 您的指令需要(可能是可选的)ngModel :

   require: ['ngModel']
   

3. 您覆盖 ngModel的 $render方法，例如:

   link: function(scope,elem,attrs,ctrls) {
       var ngModelCtrl = ctrls[0];
       ngModelCtrl.$render = function() {
           ...
       };
   }
   

   渲染逻辑负责将模型值(这里的值:<language-picker ng-model="model.selectedLanguages"/>，即 model.selectedLanguages)传输到 View 。我能想到的最简单的事情是使用隔离范围并将外部模型值传输到隔离范围的变量，如:

       ngModelCtrl.$render = function() {
           scope.innerSelection = ngModelCtrl.$viewValue;
       };
   

   在模板中将此变量绑定(bind)为:

   <ui-select ng-model="innerSelection" ...>
       ...
   </ui-select>
   

4. 最后您必须确保对内部选择的更改将传播到外部模型:

       // still inside link()
       scope.$watch('innerSelection', function(newval, oldval) {
           if( newval != oldval ) { // skip the first time
               ngModelCtrl.$setViewValue(newval);
           }
       });
   

此解决方案可能比其他解决方案复杂一些，但可以让您使用 ngModel 的所有功能，例如验证、解析/格式化(即数据转换)。