Question

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

我目前的问题是使用自定义指令和隔离范围。我试图做的就是将带有@绑定的“字符串”传递给我使用隔离范围的指令，我无法理解我做错了什么。具体为什么当我使用模板时，一切正常，当template已经在DOM中，单向数据绑定不起作用。

我的代码中的主要部分：

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创建其模板。

好的，但你需要更进一步，并通过参数化将一些数据传递给它。

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

该指令的模板现在可以绑定到这些数据，而无需了解它的外部世界＆＃34;并且它已经通过它完成了。孤立的范围。

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

希望我已经明白了这一点：）

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

angularjs自定义指令隔离范围单向数据绑定不起作用

1 个答案: