Question

我目前正在尝试按照教程here来处理angularjs。

如果我设置了以下控制器和指令：

app.controller("AppCtrl", function($scope) {
    $scope.ctrlFlavor = "orange";
});

app.directive('drink', function() {
    return {
        scope: {
            flavor: "@"
        },
        template: '<div>{{flavor}}</div>'
    };
});

以及以下html：

<div ng-app="drinkApp">
  <div ng-controller="AppCtrl">
    <div drink flavor="{{ctrlFlavor}}"></div>
  </div>
</div>

根据我在教程中的理解，＆符号表示将评估放在 flavor 属性中的任何表达式，结果将被调用ctrlFlavor函数，因此＆＃34; orange＆＃34 ;正在页面上呈现。然而，这并没有发生，＆＃34; {{flavor}}＆＃34;而是在抛出错误时呈现：

Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=ctrlFlavor&p1=is%20unex…20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BctrlFlavor%7D%7D&p4=ctrlFlavor%7D%7D

该教程还说＆＃34; @＆＃34;表示该属性将被计算为字符串。在这种情况下，我期待＆＃34; {{ctrlFlavour}}＆＃34;要呈现，但似乎正在访问控制器并呈现＆＃34;橙色＆＃34;代替。为什么是这样？我误解了＆＃34; @＆＃34;标志和＆＃34;＆amp;＆＃34;做？我真的很困惑..

由于

Answer 1

您正在orange呈现flavor，因为{{ }}属性的值正在根据<div drink flavor="ctrlFlavor"></div>进行插值。

如果您将上述内容更改为：

ctrlFlavor

你只需要渲染@。

为了它的价值我还发现隔离范围在开始时有点混乱。

此处还有一段代码片段，可以帮助您进一步解释所发生的事情。我已为&，=和{{1}}添加了隔离范围示例。

http://plnkr.co/edit/NMeHya72HDXBu8trTEUK

Answer 2

@允许您将父属性的值传递给指令的隔离范围中的属性。

请注意，默认情况下，flavor映射到DOM属性favir。如果我们想要明确指定我们想要绑定的属性的名称，我们可以这样做：

scope:{
    ctrlFlavor: '@flavor'
}

无法理解使用＆＃34; @＆＃34;在范围内，使用angularjs

2 个答案: