Question

我已经编写了一个指令来验证某些绑定值并在对按钮执行操作之前对其进行修改。但是指令值中的任何值更新都不会反映在父作用域中。我在指令中使用了（=）所以我的假设是它也会更新父作用域。

让我知道我做错了什么。已附上图片。

This is the view where both parent and the directive sharing the same text value.

The result value assigned to the validate text is not reflected in the parent selected node. while the ok function is executed. I have tried $timeout, $evalAsync on the scope.ngClick with no success. enter image description here

这是父和指令共享相同文本值的视图。

分配给验证文本的结果值不会反映在父选定节点中。执行ok函数时。

我确实看到值在文本区域中得到了更新。但是不知道为什么在执行ok函数时它没有更新。

我在scope.ngClick上尝试过$ timeout，$ evalAsync但没有成功。

Answer 1

在自定义指令元素的事件处理程序内进行的更改不会触发Angular的摘要周期。因此，您需要通知Angular范围已更改（通过调用scope.$digest()或scope.$apply()）。我注意到的另一件事是方法ok()被调用两次：一次在Angular的ngClick指令内，第二次在你的指令中。如果它不是所需的行为，请从指令中删除它。这是一些有效的代码：

<强> HTML

<body ng-controller="myController">
  <textarea ng-model="selected.note"></textarea>
  <button type="button" validatetext="selected.note" ng-click="ok()">Click Me!</button>
</body>

<强>的JavaScript

angular.module('online-desktop', []).
  controller('myController', ['$scope', function($scope) {
    $scope.selected = {
      note: 'old value'
    };
    $scope.ok = function() {
      alert($scope.selected.note);
    };
  }]).
  directive('validatetext', [function() {
    return {
      scope: {
        validatetext: '='
      },
      link: function(scope, element, attr) {
        element.on('click', function() {
          scope.$apply(function() { // <= change scope properties inside scope.$apply()
            scope.validatetext = 'some new value';
          });
        });
      }
    }
  }]);

Plunker：http://plnkr.co/edit/rmJVBzjIeiVcoQUV79z2?p=preview

Answer 2

我建议你尝试使用$ rootScope。来自该指令的$ broadcast并使用$ scope在$父中捕获它。

//directive
$rootScope.$broadcast("valueUpdated", result);

//parent
$scope.$on("valueUpdated", function(event, result){
//update the value here
});

您也可以使用$ scope。$ emit而不是$ rootScope。$ broadcast。

当指令更新同一范围变量时，Angular父范围不会更新

2 个答案: