javascript - 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

如果您想使用字符串插值（您使用 似乎就是这种情况@），您应该按照$observeAjay 在当前接受的答案的评论中提到的那样使用。

或者，如果您的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
  };
});