angularjs - 从指令更新范围变量

Question

指令更新的范围变量不会反射(reflect)在页面上我们有 {{variable}} 的位置，但是当我执行 console.log(scope) 时，它​​们确实显示为已更新。

<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.controller('demoController', function demoController($scope) {
      $scope.myElementId ="abcd";
      $scope.updateVals = function() {
        $scope.myElementClass = "";
      };
    });

    demoApp.directive('demoSelect', function() {
      return {
        restrict: 'A',
        controller: 'demoController',
        link: function(scope, element, attrs, controller) {
          element.on("click", function(event) {
            event.stopImmediatePropagation();
            event.preventDefault();
            scope.ele = angular.element(event.target);
            angular.element(".selected").removeClass("selected");
            $(scope.ele).addClass("selected");
            var mm = $(scope.ele).get(0);
            scope.myElementId = $(scope.ele).attr("id");
            scope.myElementClass = $(scope.ele).attr("class");
            scope.myElementType = mm.tagName;
          });
        }
      };
    });
  </script>

Here is the plunker 为它。我错过了什么？

Answer 1

您的演示中有几个错误:

jQuery 在 Angular 之后加载 。你应该总是在 Angular 之前加载 jQuery，所以后者知道并且可以利用前者。

自动破折号到驼峰式大小写的转换仅适用于指令， 而不是 应用程序或 Controller 的名称。因此，您应该在 HTML 中编写 demoApp 和 demoController ，而不是 demo-app 和 demo-controller 。

您正在从非 Angular 上下文(jQuery 事件回调)调用一些特定于 Angular 的代码(更新 Scope 中的值)，因此为了让 Angular 处理更改(并将结果传播到 View )，您必须将相关代码放入 scope.$apply() 中。

(这在技术上不是错误，但是):您再次将一些 jQuery 对象转换为 jQuery 对象。这引入了不必要的开销，应该避免。

考虑到上述情况，您的指令的链接函数的主体应如下所示:

element.on('click' , function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();

    $('.selected').removeClass('selected');
    element.addClass('selected');
    scope.$apply(function () {
        scope.myElementId    = attrs.id;
        scope.myElementClass = attrs.class;
        scope.myElementType  = element.prop('tagName');
    });
});

另请参阅此 woking demo 。