无法从指令访问控制器范围

Question

这是我的应用配置:

angular.module('myApp', ['myApp.directives', 'myApp.controllers', 'myApp.services']);

这是我的控制器:

angular.module('myApp.controllers', [])
  .controller('MainCtrl', function ($scope) {
      $scope.name = 'world';
  });

这是我的指示:

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

directives.directive("hello", function () {
    return function (scope, elm, attrs) {
        elm.text("hello, " + scope[attrs.name]);
    };
});

这是我的HTML:

<div ng-controller="MainCtrl">
    <h1 hello></h1>
</div>

问题是角度将指令渲染为:

你好,未定义

代替:

你好,世界

怎么了？

Answer 1

您正在访问,scope[attrs.name]但该指令未提供该属性的值name

有两种选择:

1. 将指令更改为elm.text("hello, " + scope['name']); 这不是首选方法,因为它硬编码到范围属性名称

2. 将html更改为<h1 hello name="name"></h1>.这是更好的,但我觉得它使用冗余属性

我建议你改变指令 elm.text("hello, " + scope[attrs['hello']]);

甚至更好 elm.text("hello, " + scope.$eval(attrs['hello']));

这样你得到的表达式的利益以及(例如:<h1 hello="name|uppercase"></h1>) 演示

这样html就可以了 <h1 hello="name"></h1>

关于attrs参数:它只不过是从dom元素上的属性中获取的字符串映射.

Answer 2

你可以做一些事情,在撰写本文时,似乎没有在Angular中记录(参见Mark Rajcok在这里的评论:http://docs.angularjs.org/api/ng.$ro​​otScope.Scope ).

在你的指令中:

scope.$parent.name

如果您console.log(scope)对指令scope(在指令中)执行操作,您将看到这些属性.

所有这些都说,我不知道这是否是"正确的"Angular约定,因为这个都是无证件的,而且我还没有找到关于如何访问指令所在的控制器的任何其他更好的文档内.