javascript - 在 AngularJS 指令中使用单向绑定(bind)

Question

我有一个这样定义的指令:

myApp.directive('stoplight', function() {
    return {
        restrict:'E',
        transclude: true,
        scope: {
            value: '@'
        }, 
        link: function(scope, element) {
            if (scope.value === true) {
                element.html('<i class="icon icon-true green"></i>');
            } else if (scope.value === false) {
                element.html('<i class="icon icon-false red"></i>');
            } else {
                element.html('<i class="icon icon-unknown yellow"></i>');
            }
        }
    };
});

当我使用此指令时，我使用以下标记:

<stoplight value="boolValue" />

我的红绿灯后面的 Controller 如下所示:

myApp.controller('MyController', function($scope, $http) {
    $scope.boolValue = null;
    $scope.init = function() {
      $scope.boolValue = false;
      $http.jsonp('http://anyorigin.com/get?url=www.google.com&callback=JSON_CALLBACK')
        .success(function() {
            console.log('woohoo!');
            $scope.boolValue = true;
        });
    };

    $scope.init();
}};

我有两个问题，但对我来说都没有意义。

1. 我的指令中的“@”不起作用。如果我将“@”更改为“=”，链接函数将按预期工作。但是，出于性能原因，我想使用单向绑定(bind)而不是双向绑定(bind)。
2. 由于某种原因，成功回调中的 $scope.boolValue = true; 不会更新 UI。图标保持红色。我可以将该值设置为 null，期望为黄色，但它仍然是红色。如果我查看控制台窗口，我可以看到“woohoo!”。我不明白为什么在回调之外更新 boolValue 有效，但在回调中却不起作用。我在控制台窗口中没有看到任何错误或任何此类性质的错误。

有人可以帮我确定为什么这不起作用吗？我不确定这是一个问题还是两个问题。我认为它们都与绑定(bind)有关。但是，我不知道如何解决这个问题。

谢谢。

Answer 1

关于问题#1，我相信它的发生是因为“@”总是产生字符串值。所以你可能需要scope.value === 'true' 和scope.value === 'false'。

关于问题#2，正如 neilhem 已经回答的那样，您需要双花括号:

<stoplight value="{{boolValue}}" />