Question

我刚刚浏览了Angular.js的文档 ngTransclude ，我看到了以下示例：

<script>
  angular.module('transcludeExample', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<ng-transclude></ng-transclude>' +
                  '</div>'
      };
  })
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.title = 'Lorem Ipsum';
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
  }]);
</script>
<div ng-controller="ExampleController">
  <input ng-model="title" aria-label="title"> <br/>
  <textarea ng-model="text" aria-label="text"></textarea> <br/>
  <pane title="{{title}}">{{text}}</pane>
</div>

我不太清楚为什么在指令中使用这两个属性：

transclude: true,
scope: { title:'@' },

我相信做transclude: true,赋予指令访问

$scope.title
$scope.text

在控制器中，虽然我不确定，但为什么在这里使用范围？我的意思是这样一种奇怪的方式，也就是I.E. ，

scope: { title:'@' },

那里的@是什么？总结一下我的整个问题，有人可以向我解释为什么指令中使用transclude和scope属性？

谢谢

Answer 1

transclude属性告诉angular用指令中的HTML代码替换<ng-transclude>标记。在您的情况下，{{text}}字符串。

财产：

scope: { title:'@' },

告诉angular包含在其范围内传递给指令的属性标题。

此处有更多文档：

What is the difference between '@' and '=' in directive scope in AngularJS?

当然在这里：

https://docs.angularjs.org/guide/directive

理解angular指令中作用域的上下文用法

1 个答案: