AngularJS

Question

我有一个指令是不久前写的，并且在我的整个应用程序中都被使用过。我现在意识到它需要一个手表，以便它可以在值更改时刷新和更新。

这是一个属性指令，用于根据用户的授权应用 Angular 的 ngIf 指令。在 HTML 中使用它看起来像：

<div auth-if="id=12345;CREATE,READ,UPDATE"></div>

我遇到的问题是逗号 - 当我尝试查看 authIf 的属性值时出现错误

错误：[$parse:syntax] 语法错误：令牌“,”是一个意外的令牌

现在我不知道为什么我不只是使用字母 CRUD，但我不想更改指令接受的内容并可能破坏某些东西或引起混淆等。

所以我想知道是否有办法让我 Angular 对逗号感到满意？

这是我的指令的简化版本：

angular.module("myApp").directive("authIf", ["ngIfDirective", "IsAuthorised", function(ngIfDirective, IsAuthorised)
{
    var ngIf = ngIfDirective[0];

    return {
        restrict: "A",
        priority: ngIf.priority - 1,
        terminal: ngIf.terminal,
        transclude: ngIf.transclude,
        link: function(scope, element, attrs)
        {
            var permitted = false;
            // run angular ngIf functionality
            attrs.ngIf = function() {
                return permitted;
            };
            ngIf.link.apply(ngIf, arguments);

            scope.$watch(attrs.authIf, checkAuth);
            function checkAuth() {
                /** check goes here
                    permitted = IsAuthorised(...); **/
            }
        }
    };
});

Answer 1

由于 attrs.authIf 是无效的表达式，您可以将其包装在函数中

scope.$watch(function() { return attrs.authIf; }, checkAuth);

工作example

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

    <script>
      angular
        .module('app', [])
        .controller('appCtrl', function($scope) {
          $scope.dir = 'initial value';
        })
        .directive('dir', function() {
          return {
            restrict: 'A',
            scope: true,
            link: function(scope, element, attrs) {
              scope.$watch(function() {
                return attrs.dir;
              }, function(newValue) {
                scope.custom = 'custom ' + newValue;
              });
            }
          };
        });
    </script>
  </head>

  <body ng-controller="appCtrl">
    <h1>Hello Plunker!</h1>

    <div dir="id=12345;CREATE,READ,UPDATE">
      {{ custom }}
    </div>

    <hr>

    <div dir="{{ dir }}">
      {{ custom }}
    </div>

    <input type="text" ng-model="dir">
  </body>
</html>

AngularJS - 在表达式中使用逗号或其他特殊字符来观察 $scope.$watch

AngularJS - Using a comma or other special character in expression to watch with $scope.$watch

parsing

watch

angularjs-scope

angular-directive