2015-08-03 7 views
2

Я создаю веб-приложение, которое имеет несколько диалоговых окон, созданных с помощью ng-repeat 'ing директивы, <make-dialog>. Информация, относящаяся к каждому диалоговому окну (ширина, высота, положение и т. Д.), Хранится в массиве в контроллере и передается в директиву как переменная области видимости.«Глобальные» переменные в ng-repeat в AngularJS

Теперь я хотел бы добавить логическую переменную области видимости, к которой можно получить доступ и изменить все диалоговые окна. Поэтому, когда вы нажимаете кнопку «+» в любом из диалогов, переменная области изменяется на «true», и все остальные диалоги признают, что это изменение было сделано.

Вот набросок кода я попытался:

Контроллер:

angular.module('root', []) 
.controller('index', ['$scope', function($scope){ 
$scope.dialogs = [ 
    { 
    minimized: false, 
    maximized: false, 
    width: 200, 
    height: 300, 
    top: 5, 
    left: 5, 
    zindex: 1, 
    template: 'experiment-dialog.html' 
    }, 

    { 
    minimized: false, 
    maximized: false, 
    width: 200, 
    height: 250, 
    top: 257, 
    left: 238, 
    zindex: 0, 
    template: 'other-dialog.html' 
    }]; 

$scope.bool = false; //The variable I want to be able to access and change 

}]); 

Директива:

.directive('makeDialog', function($document) { 
return { 
    restrict: 'E', 
    scope: { 
     model: '=', 
     dialogs: '=', 
     bool: '=' 
    }, 
    template: "<button ng-click='maximize()> + </button>'", 
    link: function(scope, element, attrs) { 

     scope.maximize = function() { 
      scope.bool = true; 
     } 
    } 
    } 
}); 

index.html:

<html> 
    <body ng-app='root' ng-controller='index'> 
    <div id='container'> 
     <div ng-repeat='dialog in dialogs|filter:{minimized:false}'> 
     {{bool}} 
     <make-dialog model='dialog' dialogs='dialogs' bool='bool'></make-dialog> 
     </div> 
    </div> 
    </body> 
</html> 

Это показывает на экране две кнопки a nd слова "false false". Но когда я нажимаю одну из кнопок «+», только один значений «false» изменяется на true. Таким образом, эта переменная не является глобальной, но как-то видна только одним диалогом. Есть ли способ исправить это, так что нажатие одной кнопки приведет к тому, что оба диалога поймут, что переменная теперь верна?

+0

Мой полный плункер можно найти здесь: http://plnkr.co/edit/ABQd8ZGVGeRlNWI6xIGy?p=preview, он имеет скорее больше кода, чем упрощенная версия, которую я поставил выше, но не стесняйтесь смотреть, если вы думаете это поможет. – user112233

+1

попробуйте с ссылкой на объект вместо примитива. bool = 'my.bool' –

+1

Ваша демонстрация, похоже, не демонстрирует вашу проблему. Я нажал '+', но ничего не происходит – Joy

ответ

1

Проверить работает демо: Plunker

Ваша проблема заключается в том, что вы свяжете модель в какой-то примитивной переменной внутриng-repeat:

директива ngRepeat конкретизирует шаблон один раз за единицу из коллекции. Каждый экземпляр шаблона получает свою собственную область

Итак, используйте некоторый объект для двусторонней привязки.

Смежные вопросы