angularjs将ngModel从wrapper指令传递给wrapped指令 [英] 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一起使用，但外部模型完全无法更新，请参见

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 )

推荐答案

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

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