自定义指令模式不NG-开关工作

问题描述

我想使用AngularJS提供toggable下拉列表，其中的各种选项的选择会触发不同的名单。 NG-开关好像做了正确的方式，但我的 NG-模型不具约束力，而里面的 NG-开关。精结合的作品，如果我不使用 NG-开关，但我不知道该如何切换我的下拉列表，如果是这样的话。什么能在这里是问题？

的jsfiddle：

HTML

 ＆LT;选择NG模型=periodRangeModelNG选项=项目在项目项目＆GT;＆LT; /选择＆GT;
＆LT;格上=periodRangeModel＆GT NG-开关;
    ＆LT;跨度NG-开关时=月＆GT;＆LT;期间，选择项目=monthOptionsNG模型=periodModel＆GT;＆LT; /期，选择＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度NG-开关时=季＆GT;＆LT;期间，选择项目=quarterOptionsNG模型=periodModel＆GT;＆LT; /期，选择＆GT;＆LT; / SPAN＆GT;
    ＆LT; BR＆GT;
＆LT; / DIV＆GT;
 

JS：

  angular.module（'对myApp'，[]）
.controller（MyCtrl功能（$范围）{
    $ scope.items = ['月'，'区'];
    $ scope.periodRangeModel =月;
    $ scope.quarterOptions = [一月至三月，四月至六月，七月至九月，十月至十二月];
    $ scope.monthOptions =一月，二月，三月，月，月，月，七五，八五，九五，十月，月， 十二月];
    $ scope.periodModel = $ scope.monthOptions [0];
}）
.directive（'periodSelector'，函数（）{
    返回{
        限制：'E'，
        更换：真实，
        适用范围：{项目：'='，ngModel：'='}，
        模板：＆LT;跨度＆GT;＆LT;选择NG选项=期间在项目期间'NG-模式='ngModel'＆GT;＆LT; /选择＆GT;＆LT; / SPAN＆gt;中
    }
}）;
 

解决方案

的主要原因绑定不按预期工作，为 NG-开关创建一个新的范围和时绑定到一个字符串原始原始 periodModel 未更新像您期望的（因为新范围的 periodModel 是正在更新）。

This问题有很多更详细的这是怎么回事幕后，你可以检查出的<一个href=\"https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en\">Angular Batarang Chrome扩展以直观地看到不同范围在作怪。

您可以通过像绑定到一个对象值绕过它。主要的变化是：

1）更改 periodModel 来的对象，设置属性（在这个例子中，它被称为值）

  $ scope.periodModel = {
    价值：$ scope.monthOptions [0]
};
 

2）更改任何约束力code访问 periodModel.value 而不是 periodModel

 ＆LT;期间，选择项目=monthOptionsNG模型=periodModel.value＆GT;＆LT; /期，选择＆GT;型号：{{periodModel.value}}（这是应该改变）
 

I am trying to use AngularJS to provide a toggable dropdown list, where the selection of various options will trigger different lists. ng-switch seemed like the right way to do it, but my ng-model is not binding while inside the ng-switch. The binding works fine if I do not use ng-switch, but I do not know how to toggle my dropdown lists if that's the case. What could be the issue here?

jsFiddle: http://jsfiddle.net/tanweihao88/LUzXT/3/

HTML:

<select ng-model="periodRangeModel" ng-options="item for item in items"></select>
<div ng-switch on="periodRangeModel">
    <span ng-switch-when="Month"><period-selector items="monthOptions" ng-model="periodModel"></period-selector></span>
    <span ng-switch-when="Quarter"><period-selector items="quarterOptions" ng-model="periodModel"></period-selector></span>
    <br>
</div>

JS:

angular.module('myApp', [])
.controller("MyCtrl", function($scope) {
    $scope.items = ['Month', 'Quarter'];
    $scope.periodRangeModel = "Month";
    $scope.quarterOptions = ["Jan-Mar", "Apr-Jun", "Jul-Sept", "Oct-Dec"];
    $scope.monthOptions = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    $scope.periodModel = $scope.monthOptions[0];
})
.directive('periodSelector', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { items: '=', ngModel: '='},
        template: "<span><select ng-options='period for period in items' ng-model='ngModel'></select></span>"
    }
});

解决方案

The main reason the binding does not work as intended is ng-switch creates a new scope and when binding to a string primitive the original periodModel isn't being updated as you expect (since the new scope's periodModel is being updated).

This question has a lot more detail on what's going on behind the scenes and you can check out the Angular Batarang Chrome Extension to visually see the various scopes at play.

You can get around it by binding to an object value like in this updated fiddle. The main changes are:

1) Change periodModel to an object and set a property (in this example it's called value)

$scope.periodModel = {
    value: $scope.monthOptions[0]
};

2) Change any binding code to access periodModel.value instead of periodModel

<period-selector items="monthOptions" ng-model="periodModel.value"></period-selector>

Model: {{periodModel.value}} (this is supposed to change)

这篇关于自定义指令模式不NG-开关工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！