Обновите родительскую область из директивы Child

0

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

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

В родительском контроллере:

var self = this;
self.variable = 'Init';

В Элементе:

<div data-example-directive data-variable="ParentCtrl.variable"></div>

В ребенке Директива:

scope: {
    variable: '='
}
link: function(scope) {

    scope.updateVal = function(updatedVal) {
        scope.variable = updatedVal;
    }
}
template: '<button ng-click="updateVal('Updated Value')"></button>'

Теперь, если внутри этой функции я вызываю console.log на scope.variable он отображает правильное значение updatedVal. Однако на самой странице родительский элемент не обновлялся. Есть ли какие-то "обновления", которые мне нужно позвонить?

Я думал, что точка AngularJS заключалась в том, что была привязана двусторонняя привязка данных, и мне не нужно было бы просить ее обновлять значения на основе более поздней логики? Коллега использовал broadcast но нет ли более элегантного решения?

Теги:
angular-directive
angularjs-scope

2 ответа

2
Лучший ответ

Ваша проблема проста:

Когда вы читаете: в вашем объеме вы не variable, поэтому угловой попытается посмотреть в родительском и т.д.... Пока он не найдет его.

Когда вы пишете: он будет устанавливать variable в вашей текущей области. Но у вашей родительской области все еще есть старая variable, вы ее не обновляли, потому что variable не была непосредственно в вашей текущей области.

Взгляните на: qaru.site/questions/55597/...

Вы можете решить это, используя точечную нотацию. Пример с controller as синтаксиса:

<div ng-controller="controller1 as controller1">
    {{controller1.variable}}
    <div ng-controller="controller2 as controller2">
        <input ng-model="controller1.variable" type="text"/>
    </div>
</div>
  • 0
    Да, у меня это работало как ваш ответ ранее, но я стараюсь не делать ссылки на контроллеры и тому подобное напрямую. Я понял, что это была лучшая практика пытаться держать вещи как модульные, так и благоприятные.
0

Вы на полпути в стиле controllerAs стиле $scope, вам нужно выбрать один. Поскольку другой ответ показывает первое, я сделаю последнее (я больше знаком с этим: p)

angular.module('test', [])

.directive('exampleDirective', function() {
  return {
    scope: {
      variable: '='
    },
    link: function(scope) {
      scope.updateVal = function(updatedVal) {
        scope.variable = updatedVal;
      }
    },
    template: '<button ng-click="updateVal(\'Updated Value\')">Update</button>'
  }
})

.controller('Test', function($scope) {
  $scope.variable = "Init";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='test' ng-controller="Test">
  {{variable}}
  <div data-example-directive data-variable="variable"></div>
</body>
  • 0
    Извиняюсь. Я абстрагировал его от своей текущей кодовой базы и забыл добавить это в него. Позвольте мне дважды проверить мой код и вернуться к вам, так как ваш ответ, я уверен, это то, что у меня есть на данный момент по существу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню