angularjs - 在 Angular 1.4 指令上使用 "@"作为文本属性时，如何替换隔离范围的值？ (适用于 Angular 1.3)

Question

我想在我的 html 中使用属性作为字符串。所以我不需要使用更多的范围变量。我的问题实际上是定义一些默认值。但我意识到，当我在 Angular 中使用“@”时，我无法在 Angular 1.4 中更改此值，而在 Angular 1.3 中我可以更改该值。

使用文本属性 (@) 时，有没有办法在 Angular 1.4 指令上定义默认值？

我尝试替换编译、编译 Pre 和 Pos、链接和 Controller 上的值，但它没有替换。

我可以使用“=”来代替，并将我的属性定义为字符串，但这实际上是“丑陋的”:
等式。 <ribbon title="'my title as string, but forces the single quote use'">

Angular 1.3.1 工作的 Plunker 链接:http://plnkr.co/edit/onThA71Q5SE5scU7xOez

该代码段使用 Angular 1.4

(function(){
    'use strict';

    angular.module('myApp', [])

        .directive('ribbon', function() {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    title: '@',
                    subtitle: '@'
                },
                template: '<span class="ribbon"><strong>{{title}}</strong> <i>{{subtitle}}</i></span>',
                controller: function($scope) {
                    $scope.title = $scope.title || 'Ribbon';
                    $scope.subtitle = $scope.subtitle || 'Default';
                }
            };
        });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="myApp">
    <ul>
        <li>I have a
            <ribbon></ribbon>
        </li>
        <li>I have a
            <ribbon subtitle="customized"></ribbon>
        </li>
        <li>I have a
            <ribbon title="Custom ribbon" subtitle="customized"></ribbon>
        </li>
    </ul>
</div>

Answer 1

我不确定这是否是 1.4 版本 Angular 的重大更改或错误。不过，您可以使用稍微不同的方法来解决这个问题。

1) 推迟默认分配。因为看起来即使您在作用域上设置了值(首先发生 Controller 实例化)，但在 postLink 阶段的某个位置它也会被绑定(bind)的值(此处没有值，因此未定义)覆盖。您可以使用 $scope.$evalAsync

  $scope.$evalAsync(function(){
       $scope.title = $scope.title || 'Ribbon';
       $scope.subtitle = $scope.subtitle || 'Default';
  });

2) 使用没有绑定(bind)的隔离作用域 (scope:{})(这样您就不会通过添加属性来污染其父作用域)，或子作用域 scope:true 并在静态绑定(bind)属性时从属性中读取值。

  $scope.title = attr.title || 'Ribbon';
  $scope.subtitle = attr.subtitle || 'Default';