Question

我创建了ngMap，
并且该指令不会监视任何属性值，因为属性名称是动态的（太多情况）。

但是，只有当指令用户使用双花括号将属性值赋予动态时，我才想将$ observe应用于属性

我已经尝试here来检测用户是否使用compile函数和link函数使用双花括号，但还没有运气。

通过以下代码解释

  <body ng-app="myApp" ng-controller="MyCtrl">
    <div my-dir foo="{{foo}}" bar="bar"></div>
  </body>

我想检测属性foo值是动态的，但属性bar值不是。

我尝试使用此代码进行检查，但未成功。

var app = angular.module("myApp", []);
app.controller('MyCtrl', function($scope) {
  $scope.foo = "FOO";
});
app.directive('myDir', function() {
  return {
    compile : function(tele, tattr) {
     return {
      pre : function(scope, iele, iattrs) {
        console.log('pre', iattrs);  // this is the same as the below
      },
      post : function(scope, iele, iattrs) {
        console.log('post', iattrs);
      }
     };
    }
  }
});

我的问题是如何通过AngularJS检测属性值是否是动态的？

Answer 1

您可以通过elem.attr()获取元素本身的属性值来检查非插值。

<强> DEMO

app.directive('myDir', function() {
  return function(scope, elem, attr) {
    var regex = /{{.*}}/;

    if(regex.test(elem.attr('foo'))) {
      attr.$observe('foo', function(value) {
        // observe
        console.log('observing foo');
      });
    }

    if(regex.test(elem.attr('bar'))) {
      attr.$observe('bar', function(value) {
        // observe
        console.log('observing bar');
      });
    }

  }
});

AngularJS仅获取插值的指令属性名称

1 个答案: