angular js: обновление $watcher из директивы не работает

У меня есть приложение, в котором у меня есть 2 выпадающих списка, одно для штата и другое для города, и директива, в которой есть макет значений, ни к чему не привязанных.

Мне нужно установить связь между директивой и этими двумя раскрывающимися списками.

(Прежде чем я начну, я хотел бы отдать должное Джонатану Райту: Angular JS — Мапквест)

<select ui-select2="select2Options" ng-model="LocationModel.State">
    <option value=""></option>
    <option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>
<select ui-select2="select2Options" ng-model="LocationModel.City">
    <option value=""></option>
    <option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>
</select>

Вот мой шаблон директивы html:

<map class="mapper" height="400" width="700"></map>

и вот директива angular (это не работает)

mapapp.app.directive('map', function (logger) {
    var directiveDefinitionObject = {
        restrict: 'E',
        template: '<div id="map"></div>',
        link: function link(scope, element, attrs)
        {
            var map_height = attrs['height'] || 400;
            var map_width = attrs['width'] || 400;
            $('#map').css('width', map_width).css('height', map_height);

            //somehow get the scope values to show up here every time
            //the dropdown gets selected
            var city = scope.LocationModel.City;
            var state = scope.LocationModel.State;

            /* do mapping logic here  */

        }
    };
});

Как вы можете видеть суть того, что я пытаюсь сделать, я пытаюсь заставить мою директиву распознавать раскрывающиеся списки.

Я думаю, что моя директива должна иметь свою собственную ng-модель и что значение ng-модели должно отражать два раскрывающихся списка модели, но я не совсем уверен, как это сделать. Я огляделся и не смог найти ничего, что могло бы мне помочь.

[Редактировать — 28 января 2014 г. — 19:13 по восточному времени]

Следуя совету Далорзо, я создал следующие скрипачи:

Вот jsfiddle $watch, работающий в контроллере:

http://jsfiddle.net/W4ZSQ/

Однако при удалении этих часов и попытке использовать $watch, расположенный в директиве, это не сработает.

http://jsfiddle.net/W4ZSQ/1/

[Изменить — 28 января 2014 г., 22:52 по восточному времени]

Разобрался. Поскольку я дважды вызывал LocationCtrl, я думал, что модель области действия будет общей для обоих html-элементов. По-видимому, это не так; что происходит, так это то, что я создаю еще один экземпляр модели области, где область действия будет обновлена ​​для раскрывающегося списка, но не для директивы. Совместно используя их в одной области видимости, мы видим, что значение «LocationModel.State» было изменено.

http://jsfiddle.net/W4ZSQ/2/

Я нашел находчивую ссылку о том, как заставить один контроллер общаться с другим:

http://onehungrymind.com/angularjs-связь-между-контроллерами/


angularjs angularjs-directive angularjs-model
person sksallaj    schedule 28.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это то, что вам нужно сделать в вашей директиве, это использовать новый атрибут, который будет добавлен в ваш html, что-то вроде:

data-bound-field="LocationModel.State"

Например:

<map class="mapper" height="400" width="700" data-bound-field="LocationModel.State"></map>

Затем в вашем директивном коде:

scope.$watch(attrs.boundField,function(newValue,oldValue, scope){
     /* do mapping logic here  */
});
person Dalorzo    schedule 28.01.2014
comment
эй, спасибо за помощь, я думаю, что понимаю, к чему вы клоните. У меня это не работает, должен ли я использовать параметр области действия директивы и что он должен искать? - person sksallaj; 29.01.2014
comment
директива имеет возможность добавить к ней область действия, например, как вы можете добавить шаблон, ограничить, связать и т. д. docs.angularjs.org/guide/directive найти параметр области - person sksallaj; 29.01.2014
comment
это называется изолированной областью ... но я не думаю, что то, о чем я говорю, имеет значение. У меня все еще есть проблемы здесь. - person sksallaj; 29.01.2014
comment
Ваша директива не использует изолированную область, поскольку в этом случае это должно работать так, как есть. - person Dalorzo; 29.01.2014
comment
Если возможно, можете ли вы взглянуть на jsfiddle, который я добавил к моему вопросу, и посмотреть, можете ли вы чем-нибудь помочь? Это сводит меня с ума. jsfiddle.net/W4ZSQ/1 - person sksallaj; 29.01.2014
comment
Эй, я понял, что если я снова вызову контроллер из двух мест в моем html-документе, я не получу все значения. Я в основном создаю новый экземпляр модели. Смотрите мое редактирование здесь: jsfiddle.net/W4ZSQ/2. Поскольку вы решили более оригинальный вопрос, я отмечаю это как ответ. Спасибо. - person sksallaj; 29.01.2014