Angular：在链接或控制器的隔离范围内覆盖“@”属性答案

【问题标题】：Angular: Override '@' property in isolate scope in link or controllerAngular：在链接或控制器的隔离范围内覆盖“@”属性
【发布时间】：2015-02-19 15:27:11
【问题描述】：

我有这样的指令：

  .directive('myPane', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      controller: function($scope, $timeout) {
        $scope.title = "Foo";
      },
      templateUrl: 'my-pane.html'
    };
  });

我的 HTML 如下所示：

  <my-pane title="Hello">
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>

还有my-pane.html:

<h4>{{title}}</h4>
<div class="tab-pane" ng-transclude>
</div>

现在，由于某种原因，尝试覆盖 title 属性不起作用。

我的问题是，为什么不呢？

到目前为止我发现了什么：

这在 link 函数中的行为相同
在link 函数中使用attrs.title = "Foo" 的行为就像我希望的那样
使用$timeout(function(){ $scope.title = "Foo"; }) 也可以按照我的意愿行事

【问题讨论】：

你想要完成什么？如果在创建时未提供标题，您是想提供一个标题，还是总是想覆盖标题属性？
如果没有提供title，我将尝试提供。如果根本没有设置属性，这似乎可行，但如果设置如下：title="{{obj.title}}" 其中obj.title 是null，那不起作用...

标签： javascript angularjs

【解决方案1】：

您在指令中使用了@，但这只是单向数据绑定。你应该使用'='，它是2-way-databinding。

像这样改变它：

.directive('myPane', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        title: '='
      },
      controller: function($scope, $timeout) {
        $scope.title = "Foo";
      },
      templateUrl: 'my-pane.html'
    };
  });

【讨论】：

在这种情况下，我不希望/不需要 2 路数据绑定。我只想更改 local 指令scope 中的title 属性。如果没有 2 路绑定，这不应该是可能的吗？
问题是你想改变范围。如果它是单向的，你不能改变它。 @ 主要用于将一个作用域传递给其他作用域并查看它。
@ 用于传递字符串文字，你不能用它传递范围值，如果你传递 {{scope.bob}} 你的值将是 {{scope.bob}}
对。我的问题是scope.bob 没有定义。我希望能够设置$scope.title，以便我的指令模板对{{title}} 的使用被本地$scope 插值。