angularjs 将 ngModel 从包装指令传递到包装指令 [英] angularjs pass ngModel from wrapper directive to wrapped directive

问题描述

我是 Angular 的新手，仍然痛苦地围绕着自定义指令.

I'm new to Angular and still painfully wrapping my head around custom directives.

我想重用这段 HTML

I'd like to reuse this bit of 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>

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

by wrapping it into my custom directive:

<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 指令?

But how do I pass the ngModel from my language-picker to the ui-select directive ?

更新

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

Using the suggestions below, I got it work with ui-select, but the outer model doesn't get updated at all,see plnkr.co/edit/Y43dmMGIc5GxM9fLoNPW, probably because it's child scope and parent scope remains the same?

更新 2

我让它以一种对我来说看起来很糟糕的复杂方式工作，因为我不知道为什么它首先工作"(请参阅​​控制器中发生的奇怪事情):

I got it to work in a convoluted way that looks horrible to me, because I've no idea why it "works" in the first place (see the weird stuff happening in the 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)

I would be very happy if anyone could explain what's going on (the "working" example is here http://plnkr.co/edit/B53F9sc7UGkj0uxUpC17 )

推荐答案

您需要在指令的作用域上使用equals"语法.这将保留在父作用域中填充的值.所以你的指令变成:

You need to use the "equals" syntax on you directive's scope. This will keep hold of the values populated in the parent scope. So your directive becomes:

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,
            scope: {
                ngModel: "=ngModel"
            }
            ...
        };
    });

我相信这对你有用:)如果没有，请告诉我！

I am confident this will work for you :) Let me know if it does not!

这篇关于angularjs 将 ngModel 从包装指令传递到包装指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！