2

我似乎無法獲得使用Angular指令的選擇!我有兩個選擇,都在一個指令內。我想爲第一個選擇確定第二個選擇的可用選項。Angular指令不適用於選擇

Here's a fiddle: 

http://jsfiddle.net/jordannpotter/hfyUa/

  1. 選擇 「巴茲」,從 「二次選擇」
  2. 選擇 「第一」,從 「主選擇」
  3. 注意, 「第二選擇」 一片空白 !!

當然,如果你註釋掉指令代碼(第3-9行),它可以很好地工作。

這是怎麼回事,我該如何解決?

+0

你想如果輔助主動改變?根據選擇的主要內容,次要選項的可用選項有所不同。在你的例子中,對於「第一」小學,中學將有3個選項,對於「第二」小學將有2個選項。 當主要變更時,你想要發生什麼? –

+0

從第24行開始,'$ scope.secondary = $ scope.secondaryOptions [0]'它應該將select設置爲第一個可用選項o_0 – user1161657

+0

請注意,如果您註釋掉第3-9行的內容,它會很好地工作:/ – user1161657

回答

1

所以你所發生的事情是你的指令的範圍將你從控制器的範圍中分離出來,並且你需要在主變量和次變量之前添加一個對象級別。

var app = angular.module('myApp', []) 

app.directive('awesomeDirective', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: '<div class="awesome" ng-transclude></div>' 
    } 
}); 

AwesomeController = function ($scope, $timeout) { 
    $scope.options = {}; 
    updateAllowedSecondaryOptions = function() { 
     if ($scope.options.primary == 'primaryOption1') { 
      $scope.secondaryOptions = [ 
       {value: 'foo', title: 'Foo'}, 
       {value: 'bar', title: 'Bar'}, 
       {value: 'baz', title: 'Baz'}] 
     } else if ($scope.options.primary == 'primaryOption2') { 
      $scope.secondaryOptions = [ 
       {value: 'bar', title: 'Bar'}, 
       {value: 'baz', title: 'Baz'}] 
     } 

     $scope.options.secondary = $scope.secondaryOptions[0] 
    } 

    $scope.options.primary = 'primaryOption2' 
    updateAllowedSecondaryOptions() 

    $scope.primarySelected = function (newValue) { 
     $scope.options.primary = newValue; 
     updateAllowedSecondaryOptions() 
    } 
}; 

http://jsfiddle.net/G5PLL/

您可以通過閱讀https://github.com/angular/angular.js/wiki/Understanding-Scopes其進入正在發生的事情,從原型繼承脫離你看到更多的正在發生的事情。

P.S. Misko的規則「只要你有ng模型,那裏就有一個點。如果你沒有一個點,你做錯了。「

+0

最好的!! – user1161657