Question

这是我的代码

where find_in_set(r.tag, vfilterList)

linkFunc基本上确定是否单击了指令元素。

我验证了无论何时单击指令元素，它都会调用true，当单击指令元素外的任何元素时，它会调用false。

然而，似乎控制器中的var directive = { restrict: 'E', templateUrl: '/static/myTemplate.html', scope: { }, controller: ["$scope", controllerFunc], controllerAs: 'multiCheckboxCtrl', bindToController: true, link: linkFunc, }; return directive; function controllerFunc($scope) { // $watch List /** * Event handler for searchText change */ $scope.$watch(angular.bind(this, function () { return $scope.multiCheckboxCtrl.clickedElsewhere.value; }), function (newVal) { if (newVal !== undefined && newVal !== "") { console.log(newVal); console.log("I am here"); } }); } function linkFunc(scope, element, attr){ // Detect Element Click Logic scope.multiCheckboxCtrl.clickedElsewhere = {value: false}; $document.on('click', function(){ scope.multiCheckboxCtrl.clickedElsewhere.value = false; console.log(scope.multiCheckboxCtrl.clickedElsewhere); }); element.on('click', function(){ event.stopPropagation(); scope.multiCheckboxCtrl.clickedElsewhere.value = true; console.log(scope.multiCheckboxCtrl.clickedElsewhere); }); // End Detect Element Click Logic }没有抓住变化。

任何人都可以告诉我出了什么问题

由于

Answer 1

Angular不知道事件监听器中存在更改对象属性。

正如documentation 所说：

$apply()用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM events，setTimeout，XHR或第三方库）。因为我们正在调用角度框架，所以我们需要执行异常处理的适当范围生命周期，执行监视。

jsfiddle上的实例。

＆＃13;

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
   
  })
  .directive('clickDirective', function() {
    var directive = {
      restrict: 'E',
      template: '<div>click me</div>',
      scope: {},
      controller: ["$scope", controllerFunc],
      controllerAs: 'multiCheckboxCtrl',
      bindToController: true,
      link: linkFunc,

    };

    return directive;


    function controllerFunc($scope) {

      // $watch List

      /**
       * Event handler for searchText change
       */
      $scope.$watch(function() {
        return $scope.multiCheckboxCtrl.clickedElsewhere.value;
      }, function(newVal) {
        if (newVal !== undefined && newVal !== "") {
          console.log(newVal);
          console.log("I am here");
        }
      });


    }

    function linkFunc(scope, element, attr) {

      // Detect Element Click Logic
      scope.multiCheckboxCtrl.clickedElsewhere = {
        value: false
      };

      angular.element(document).on('click', function() {
        scope.multiCheckboxCtrl.clickedElsewhere.value = false;
        console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        scope.$apply();
      });

      element.on('click', function() {
        event.stopPropagation();
        scope.multiCheckboxCtrl.clickedElsewhere.value = true;
        console.log(scope.multiCheckboxCtrl.clickedElsewhere);
        scope.$apply();
      });
      // End Detect Element Click Logic

    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController" id="ExampleController">
    <click-directive></click-directive>
    <div>
       click elsewhere
    </div>
  </div>
</div>

＆＃13;

指令控制器使用Angular读取指令链接时，范围变量不会更新

1 个答案: