11

这是我的应用程序配置：

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>

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

你好，未定义

代替：

你好世界

怎么了？

4

4 回答 4

7

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

有2个选项：

  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 元素上存在的属性中获取的字符串映射。

于 2012-12-24T14:57:13.577 回答
6

您可以做一些事情，在撰写本文时，Angular 中似乎没有记录（请参阅 Mark Rajcok 的评论：http://docs.angularjs.org/api/ng.$ro​​otScope.Scope ）。

从您的指令中：

scope.$parent.name

如果您console.log(scope)对指令执行 a scope（从指令内），您将看到这些属性。

综上所述，我不知道这是否是“正确的”Angular 约定，因为这两者都没有记录，而且我还没有找到任何其他更好的文档来说明如何访问指令所在的控制器之内。

于 2013-08-04T06:44:08.193 回答
3

您可以使用scope. 看http://jsfiddle.net/rPUM5/

directives.directive("hello", function () {
    return function (scope, elm, attrs) {
        elm.text("hello, " + scope.name);
    };
});​
于 2012-12-24T15:08:57.947 回答
1

我发现了另一个案例：

如果您正在访问来自 Ajax 请求正文的变量，那么您必须等待该变量被设置。

例如：

# in controller
$http.get('/preview').then( (response) ->
  $scope.tabs = response.data.tabs
  $scope.master_switch = '1'
  console.info 'after get response in controller'
)

# in directive
directive('masterSwitch', ->
  (scope, element, attrs) ->
    alert 'in directive!'   # will show before "after get response in controller"
    console.info scope.master_switch  # is undefined
    setTimeout( -> console.info(scope.master_switch), 50) # => 1
于 2013-08-06T01:34:58.030 回答