Просто, когда я думаю, что я понимаю 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
но нет ли более элегантного решения?
Ваша проблема проста:
Когда вы читаете: в вашем объеме вы не 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>
Вы на полпути в стиле 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>