angularjs自定义指令隔离作用域单向数据绑定不'；行不通

我是angularjs的新手，我读了一些文学作品，也听了很多教程，但我仍然觉得自己完全糊涂了

我当前的问题是自定义指令和隔离作用域。我所要做的就是将带有@binding的“字符串”传递给使用隔离作用域的指令，我不明白我做错了什么。特别是为什么当我使用模板时，一切都很好，而当DOM中已经存在

模板时，单向数据绑定就不起作用了


我的代码中的主要部分：

HTML


此指令未使用模板
$scope.title={{title}

JS

var-app=angular.module（'app'，[]）；
app.directive（'myDirective'，function（）{
返回{
限制：“AE”，
范围：{
标题：“@myTitle”
},
链接：功能（范围、元素、属性、c）{
log（'非模板指令链接：'，scope.title，attrs.myTitle）；
},
控制器：['$scope'，函数（$scope）{
log（'non-template directive controller:'，$scope.title）；
}]
};
});
app.directive（'myDirectiveWithTemplate'，function（）{
返回{
限制：“AE”，
范围：{
标题：“@myTitle”
},
链接：功能（范围、元素、属性、c）{
log（'使用模板指令链接：'，scope.title，attrs.myTitle）；
},
控制器：['$scope'，函数（$scope）{
log（'使用模板指令链接：'，$scope.title）；
}],
模板：'此指令正在使用模板$scope.title=“{{title}}”，
替换：正确
};
});

在非模板场景中，标题没有绑定到任何范围，因此没有显示任何内容

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

据我所知，创建一个独立的作用域以使其可用于指令的模板才有意义

澄清

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

假设您正在创建此指令以在代码中的其他地方重用该UI片段，则首先使用共享HTML创建其模板

好的，但您需要进一步对其进行参数化，并向其传递一些数据

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

该指令的模板现在可以绑定到该数据，而无需知道它的“外部世界”，并且是通过它的隔离范围完成的

结论：如果不向模板提供这些数据，为什么要创建一个单独的范围

希望我已经讲清楚了：）

现在在考虑了一下我的肯定之后。。。您还可以使用compile或link函数创建一个没有任何模板的指令，并通过DOM操作手动执行。在这种情况下，出于上述原因，有一个单独的作用域可能是有意义的：）
谢谢你的回答。我真的认为（我所谓的）
DOM模板
可以访问该指令的独立范围。你能解释一下最后一句话吗。我不知道如何/在哪里绑定到控制器。你能发布代码或通过克隆我的小提琴来修复我的代码吗？或者你的意思是将指令嵌入控制器中？我在这里做了一个修复，以说明我在控制器中嵌入div的意思。我将编辑我的第一个答案以进一步解释。
<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>

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

  };
});