angularjs将ngModel从wrapper指令传递给wrapped指令

问题描述

我是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 herehttp://plnkr.co/edit/B53F9sc7UGkj0uxUpC17)

推荐答案

您需要在指令的作用域上使用等于"语法.这将保留父范围中填充的值.因此，您的指令变为:

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从wrapper指令传递给wrapped指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！