Question

当我认为我已经掌握了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的正确值。但是在页面本身上，父级还没有更新。是否有某种＆＃34;刷新＆＃34;我需要打电话？

我认为AngularJS的观点是双向数据绑定已经完成，我不必要求它根据以后的逻辑更新值？一位同事使用了broadcast，但是没有更优雅的解决方案吗？

Answer 1

你的问题很简单：

当您阅读：在您的范围内，您没有variable，因此angular会尝试查看父级等等......直到找到它为止。

撰写时：它会在您当前的范围内设置variable。但是您的父作用域仍然使用旧的variable，因为variable并非直接位于您当前的范围内，所以您没有更新它。

看看：https://stackoverflow.com/a/16929117/3292234

您可以使用点符号解决此问题。使用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>

Answer 2

在controllerAs样式和$scope样式中，您需要选择一个样式。由于另一个答案显示前者，我会做后者（我对此更熟悉; p）

＆＃13;

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";
});

＆＃13;

<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>

＆＃13;

从子指令更新父范围

2 个答案: