1

我完全被难住了。我开始以为我知道我在做什么，现在已经尝试了很多变化，我不知道问题可能是什么。

http://jsfiddle.net/PCfZV/11/

我正在创建一个名为“mylist”的指令，我想将一些数据交给（在本例中是一个数字）：

<span ng-repeat="node in [1,2,3,4,5]">
    <mylist counter="{{node}}"></mylist>
</span>

到目前为止，一切都很好......创建我的指令工作正常。

var myApp = angular.module('myApp', []);
myApp.directive('mylist', function() {
    return {
        restrict: "E",
        template: "<P>You counted to: '{{inTemplate}}'.</P>",
        replace: true,
        controller: MyCtrl,
        scope: { inTemplate: "@counter" }
    }
});

现在，当我添加控制器时，我不知道在哪里可以找到counter(or inTemplate) 变量。

function MyCtrl($scope, $http, $attrs, $element) {
    $scope.inTemplate = "blah blah" + $attrs.counter;
}​

与往常一样，感谢任何见解。可能只是 Angular 对我来说太过分了 :)

非常感谢，

内特

4

2 回答 2

1

计数器是指令范围的一部分，您可以使用batarang详细了解这一点。

您应该可以通过 $scope.inTemplate 访问它。我插手了你的小提琴，并让它以三种方式工作：

使用属性http://jsfiddle.net/PCfZV/46/：

<mylist node="{{node}}"></mylist>

    template: "<P>You counted to: '{{countTo()}}'.</P>",
    replace: true,
    controller: MyCtrl,
    scope: {node: '@'}

function MyCtrl($scope, $http, $attrs, $element) {
    $scope.countTo = function(){return "blah blah" + $scope.node};
}​

通过链接到父范围http://jsfiddle.net/PCfZV/47/：

<mylist is-counter="node"></mylist>

    template: "<P>You counted to: '{{inTemplate}}'.</P>",
    replace: true,
    controller: MyCtrl,
    scope: {
        "isCounter": "="
    }

使用表达式http://jsfiddle.net/PCfZV/48/：

<mylist is-counter="'bla bla' + node"></mylist>

    template: "<P>You counted to: '{{isCounter()}}'.</P>",
    scope: {
        "isCounter": "&"
    }

还可以查看 console.log 以了解实例化控制器时属性的值。

于 2012-12-31T19:03:38.497 回答
0

在您的帖子中，该指令创建了一个“隔离范围”——因为scope: { ... }. （隔离范围在原型上并不从其父范围继承。如果您想了解更多关于这意味着什么的信息，包括隔离范围与其父范围相关的图片，请参阅范围原型/原型的细微差别是什么AngularJS 中的继承？，部分指令）。

在您的工作小提琴中（您在@iwein 的评论中提到），该指令不会创建新的范围，但它定义了一个控制器，因此控制器和指令使用相同的范围 - 所以它们都可以看到任何在范围上定义的属性。在你的小提琴中，is-counter="{{node}}"没有做任何事情，所以它可以被删除并且它仍然可以工作。

另外值得注意的是，对于每个数组项/节点，您正在创建一个单独的 MyCtrl 控制器（我不确定这是否是故意的。），因为指令有controller: MyCtrl. Angular 将MyCtrl其作为构造函数，并在每次遇到mylistHTML 中的指令时创建一个控制器（由于 ng-repeat，这是 5 次）。

通常，您需要指定控制器在 HTML 中的支配位置：

<div ng-controller="MyCtrl">
   <span ng-repeat="node in [1,2,7,6,5]">
   ...
   </span>
</div>

（有时您可能希望为每个指令实例化一个控制器，但这不太常见。）

如果你使用 ng-controller，你不需要在你的指令中指定控制器——指令将（默认）使用父作用域——即与控制器相同的作用域。

我不确定您要在控制器中做什么，但我只想在控制器范围内定义一个属性来保存您的额外文本，

$scope.extraText= "blah blah";

然后在模板中使用它：

template: "<P>You counted to: {{extraText}} '{{node}}'.</P>",

小提琴。

可能只是 Angular 对我来说太过分了 :)

对我来说，AngularJS 的学习曲线相当陡峭（我还在学习）。不要放弃它。我认为这是一个很棒的框架。

于 2012-12-31T21:22:59.953 回答