Директивы Angular не работают с выборками

Кажется, я не могу заставить select работать с директивами Angular! У меня есть два выбора, оба внутри директивы. Я хотел бы, чтобы первый выбор определял доступные параметры для второго выбора.

Here's a fiddle:

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

  1. Выберите «Baz» из «Secondary Select».
  2. Выберите «Первый» из «Основного выбора».
  3. Обратите внимание, что поле «Дополнительный выбор» опускается пустым!!

Конечно, если закомментировать код директивы (строки 3-9), то работает отлично.

Что здесь происходит и как это исправить??


javascript angularjs angularjs-directive angularjs-scope
person user1161657    schedule 31.05.2013    source источник
comment
Как вы хотите, чтобы вторичный действовал при изменении основного? Доступные параметры вторичного устройства различаются в зависимости от того, что выбрано для основного. В вашем примере для первого первичного будет 3 варианта вторичного, а для второго основного будет 2 варианта. Что именно вы хотите, чтобы произошло с вторичным, когда первичный изменен?   -  person Sarwar Erfan    schedule 31.05.2013
comment
Из строки 24 $scope.secondary = $scope.secondaryOptions[0] он должен установить выбор на первую доступную опцию o_0   -  person user1161657    schedule 31.05.2013
comment
Обратите внимание, что он отлично работает, если вы закомментируете строки 3-9:/   -  person user1161657    schedule 31.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

Итак, что у вас происходит, так это то, что область действия вашей директивы отделяет вас от области действия вашего контроллера, и вам нужно добавить уровень объекта перед первичной и вторичной переменными.

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. Правило Миско «Всякий раз, когда у вас есть ng-модель, где-то там должна быть точка. Если у вас нет точки, вы делаете это неправильно».

person Paul Ryan    schedule 31.05.2013