Question

我是angularjs的新手，我无法访问控制器中的指令属性。

指令

<rating max-stars="5" url="url.json"></rating>

app.directive('rating', [function () {
    return {
        restrict: 'E',
        scope: {
            maxStars: '=',
            url: '@'
        },

    link: function (scope, iElement, iAttrs) {
     console.log(iAttrs.url); //works
}

控制器

app.controller('ratingController', ['$scope', '$attrs' , '$http','$routeParams',function  ($scope,$attrs,$http,$routeParams) {


            console.log($attrs.url); //shows undefined

}]);

如何访问控制器中的url属性？

Answer 1

如果要将控制器与指令关联，可以使用指令定义对象的controller属性（将控制器指定为函数或指定控制器的名称（在这种情况下）它可以在模块中的任何地方注册））。

app.directive('rating', [function () {
    return {
        restrict: 'E',
        scope: {
            maxStars: '=',
            url: '@'
        },
        controller: 'ratingController'
    };
});

// Meanwhile, in some other file
app.controller('ratingController', function ($scope, $element, $attrs) {
    // Access $attrs.url
    // Better yet, since you have put those values on the scope,
    // access them like this: $scope.url
    ...
});

通过=使用双向数据绑定时，相应属性的值不应该是文字（因为您不能对文字进行双向数据绑定），但是一个字符串，指定当前范围内的属性名称。

将<rating max-stars="5"...与scope: {maxStars: '='...一起使用是错误的您应该使用<rating max-stars="5"...和scope: {maxStars: '@'...
或<rating max-stars="someProp"...和scope: {maxStars: '='...，而封闭范围有一个名为someProp的属性，带有数值（例如$scope.someProp = 5;）。

Answer 2

app.directive('myDirective',function(){

  return{

    controller: function($scope,$attrs){
        console.dir($attrs);
    }

  }

});

那就是它。如果要访问控制器上的元素属性，则必须为该指令设置控制器。

（但是，您可以使用共享服务将这些属性提供给其他控制器，如果您希望实现这些属性的话）

Answer 3

http://jsbin.com/xapawoka/1/edit

拿出你的代码并用它制作一个jsBin。我无法看到任何问题，所以我假设这是你代码中的一个简单错字（可能是指令定义顶部的流浪[括号）。

以下是代码：

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

app.controller('ratingController', 
  function ($scope, $element, $attrs) {
  console.log('ctrl.scope', $scope.url);
  console.log('ctrl.attrs', $attrs.url);
});

app.directive('rating', function () {
  return {
    restrict: 'E',
    scope: {
      maxStars: '=',
      url: '@'
    },
    controller: 'ratingController',
    link: function (scope, el, attrs) {
      console.log('dir.scope', scope.url);
      console.log('dir.attrs', attrs.url);
    }
  };   
});

这是输出：

http://cl.ly/image/031V3W0u2L2w

Answer 4

ratingController与您的指令无关。因此，没有任何元素可以保存绑定到该控制器的属性。

如果您需要访问这些属性，link功能就是您所需要的（如上所述）

您想要达到什么目标？

Angularjs - 如何在控制器中访问指令属性

4 个答案: