angularjs自定义指令隔离范围一种方式数据绑定不起作用

Question

我是 angularjs 的新手，我阅读了一些文献并遵循了很多教程，但我仍然觉得我完全糊涂了。

我当前的问题是自定义指令和隔离范围。我要做的就是将带有@绑定的“字符串”传递给我的使用隔离范围的指令，我不明白我做错了什么。特别是为什么当我使用模板时一切正常，而当template 已经在 DOM 中时，一种数据绑定方式不起作用。

JSBin fiddle link

我的代码中的主要部分：

HTML

<div my-directive my-title="TITLE ONE WAY Data Binding">
  <div>
    <div>This directive is <span style="color:red;">NOT using template</span></div>
    <div>
      $scope.title = <small><pre>{{title}}</pre></small>
    </div>
  </div>
</div>

<div my-directive-with-template my-title="TITLE ONE WAY Data Binding"
  >
  <!-- this directive use a template -->
</div>

JS

var app = angular.module('app', []);

app.directive('myDirective', function() {

  return {
    restrict: 'AE',
    scope:{
      title: "@myTitle"
    },
    link: function(scope, ele, attrs, c) {
      console.log('non template directive link:',scope.title,attrs.myTitle);
    },
    controller:['$scope', function($scope){
        console.log('non template directive controller:',$scope.title);
    }]
  };
});



app.directive('myDirectiveWithTemplate', function() {
  return {
    restrict: 'AE',
    scope:{
      title: "@myTitle"
    },
    link: function(scope, ele, attrs, c) {
      console.log('using template directive link:',scope.title,attrs.myTitle);
    },
    controller:['$scope', function($scope){
        console.log('using template directive link:',$scope.title);
    }],
    template:'<div><div>This directive is using template</div><div>$scope.title = <small><pre>"{{title}}"</pre></small></div></div>',
    replace:true

  };
});

JSBin fiddle link

Answer 1

在您的非模板场景中，标题未绑定到任何范围，因此不显示任何内容。

你所说的 DOM 模板实际上是指令之外的 HTML，它无法访问它的隔离范围。您可以将此 div 嵌入到控制器中，然后标题可以绑定到控制器的 $scope.title

据我了解，创建一个隔离范围以使其可用于指令的模板才有意义。

澄清

隔离作用域允许指令具有独立于父作用域的状态（避免其污染），并且还避免与同级指令共享此状态。

假设您正在创建此指令以在代码中的其他位置重用该部分 UI，您首先使用共享 HTML 创建其模板。

好的，但是您需要更进一步，并对其进行参数化，将一些数据传递给它。

然后您可以使用指令上的属性与外部通信（父范围，或只是传递静态数据）。

指令的模板现在可以绑定到该数据，而无需对其“外部世界”有任何了解，并且它是通过其隔离范围完成的。

结论，如果不为模板提供这些数据，为什么要创建一个隔离范围？

希望我已经说清楚了:)

现在在考虑一下我的肯定之后......好吧，您也可以创建一个没有任何模板的指令，通过使用编译或链接功能并通过 DOM 操作手动完成。在这种情况下，由于上述原因，有一个孤立的范围可能是有意义的:)