AngularJS CamelCase 与 bind 和 $apply 解释

Question

我对指令比较陌生，我有这段代码，我从几个不同的来源拼凑而成。首先，我试图将指令更改为 CamelCase，因此指令的名称将类似于 myResize 但我似乎无法做到。我知道 angular 会进行规范化，所以我知道在我的 div 上它应该是 my-resize 而在我的指令上它应该是 myResize 但这不起作用？

另外，有人能解释一下 bind scope.$apply 函数在做什么吗？我认为当 scope.getWindowDimensions 发生变化时，单独的 $watch 会更新 scope.adjustForm，但显然情况并非如此。代码工作正常，我只是不知道为什么。

<div id='landingWrapper' ng-class='{"centerForm": adjustForm}' resize></div>

---

.directive('resize', function ($window) {
  return function (scope, element) {
    var w = angular.element($window);
    scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
    };
    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
        var windowHeight = newValue.h;
        var formHeight = element[0].offsetHeight;
        if (formHeight > windowHeight) {
            scope.adjustForm = false;
        }
        else {
            scope.adjustForm = true;
        }
    }, true);
    w.bind('resize', function () {
        scope.$apply();
    });
  }
})

Answer 1

你问了几件事：

1. 在 JS 文件中定义指令时，应使用驼峰式 (myResize)，而在 HTML 中应使用破折号 (my-resize)。如果它对您不起作用，则说明其他问题。
2. 主 Angular 指令 (ng-app) 下的每个 DOM 元素都有一个范围。指令可能会或可能不会引入它们自己的隔离范围 - 即 - 只有在它们的树下的元素我们才会暴露给它们的变量的范围。这样，对某个元素的更改（例如值更改）不必传播到 DOM 中的所有元素（性能！！和内存！！），而只需传播到同一范围内的元素（您当然可以在范围之间共享变量）。由于这种机制，当范围发生任何更改时，Angular 可以通知范围内所有需要知道的内容已更改。但是 Angular 知道某些事情发生了变化的唯一方法是，如果 $digest() 循环已经开始（$apply() 触发 $digest()），它会强制 angular 遍历所有“当前”范围并查看是否有什么东西发生了变化。改变了。
   （主要的 -）jQuery 本身（或任何非 Angular 框架）本身不会更新 Angular（调用 $digest()），因此您必须手动进行（通过调用 $apply() 或 $digest() ) 每当 jQuery 上发生事件时。