Question

我有一个控制器通过$ scope将两个变量传递给我的视图。我可以在视图中显示这些变量。

在我看来，我有一个指令，我将两个变量传递给指令范围。

这是我的指示：

.directive('notes', function(){
  return {
    restrict: 'E',
    templateUrl:'views/directives/notes-tpl.html',
    scope:{
      time:'=',
      unit:'='
    },
    controller:['$scope',function($scope){

      console.log('Current Time Stamp: ' + $scope.time);
      console.log('Current Unit Stamp: ' + $scope.unit);

      };

    }]
  };
})

这是我的HTML：

 <notes time='currentTimeStamp' unit='currentUnitStamp'></notes>

问题是我的console.log（）将它们显示为未定义。

我从模态调用指令：

<!-- NOTES MODAL -->
<script type="text/ng-template" id="notesModal.html">
    <div class="modal-header">
        <a class="close" data-dismiss="modal" aria-label="Close" ng-click="close()"><span aria-hidden="true">&times;</span></a>
        <h3 class="modal-title">Notes</h3>
    </div>

    <notes currentTimeStamp='{{currentTimeStamp}}' currentUnitStamp='{{currentUnitStamp}}'></notes>

</script>

Answer 1

看到你的例子后，我猜了一个新的猜测：

这是用于调用指令的HTML

<notes currentTimeStamp='{{currentTimeStamp}}' currentUnitStamp='{{currentUnitStamp}}'></notes>

但您的notes.js对此没有任何约束力。

return {
    ...
    scope: {
        currentTimeStamp="",
        currentUnitStamp=""
    }
    ...
}

您需要将此传递到您的指令中：
```
<notes current-time-stamp='currentTimeStamp' current-unit-stamp='currentUnitStamp'></notes>
```
注意current-time-stamp而不是currentTimeStamp。查看规范化部分。

https://docs.angularjs.org/guide/directive

我希望这个会解决你的问题。

另一个猜测：

可能是你在纯JS中更新“out of angular”。所以angular不知道它必须更新你的值。

假设您要更新click事件的某些值。现在我们使用angulars ng-click进行更新和调用方法（因此，角度会自动触及摘要周期并更新值）。

像这样：ng-click="updateTimeStamp()

现在出于某种原因，我们不使用angular，而是使用本机事件侦听器： element.addEventListener("click", updateTimeStamp);

因此，如果我们现在想要更新范围及其值，我们必须使用$timeout服务来实现摘要周期。

有关摘要周期的更多信息：https://docs.angularjs.org/guide/scope

要进行验证，请在侦听器的末尾添加$timeout(angular.noop);，您可以在其中设置值。

示例：

myElement.addEventListener("click", function () {
    var newTime = takeMeFromSomewhere;
    $scope.time = newTime;
    // Angular doesn't know to update the binding!
    $timeout(angular.noop);
    // now you kicked off the digest cycle and angular will update the values
});

没有在指令中看到范围

1 个答案: