AngularJS范围属性未定义

Question

为什么$scope.orderBy 未定义？ 不应该是“测试”吗？

http://jsfiddle.net/XB4QA/4/

var app = angular.module("Foo", []);

app.directive("two", function () {
return {
    scope: {
        orderBy: '@'
    },
    restrict: 'E',
    transclude: true,
    controller: function ($scope, $element, $attrs) {
        console.log($scope.orderBy); // is undefined, why?   
    },
    template: '<div></div>',
    replace: true
};
});

<div ng-app="Foo">
    <two order-by="test">test</two>
</div>

Answer 1

@ 绑定在指令的范围内进行插值，并且此插值稍后在指令链接阶段之后进行。这意味着虽然指令模板可以使用绑定，但它们在各种指令配置方法中不可用。但是，= 绑定可立即用于指令，因此如果您想立即访问，我建议使用这样的绑定。

如果test 是您要访问的文字值，请在属性值周围添加单引号，例如：

<two order-by="'test'">

如果test 是一个变量，则保持HTML 不变。在任何一种情况下，将绑定更改为：

scope: {
    orderBy: '='  // = instead of @
}

Answer 2

如果您想使用字符串插值（您使用 @ 似乎就是这种情况），您应该使用 $observe，正如 Ajay 在 cmets 中提到的当前接受的答案。

或者，如果您的orderBy 属性始终是文字字符串，您可以创建一个空的隔离范围并且不要尝试绑定orderBy。然后你可以使用$attrs.orderBy 来获取字符串值。

这很好用。

app.directive("two", function () {
  return {
    scope: {
      orderBy: '@'
    },
    restrict: 'E',
    transclude: true,
    controller: function ($scope, $element, $attrs) {
      $attrs.$observe('orderBy', function() {
        console.log($scope.orderBy);
      });
    },
    template: '<div></div>',
    replace: true
  };
});

也是这样：

app.directive("two", function () {
  return {
    scope: {
    },
    restrict: 'E',
    transclude: true,
    controller: function ($scope, $element, $attrs) {
      console.log($attrs.orderBy);
    },
    template: '<div></div>',
    replace: true
  };
});