Question

我只是开始研究角度，并且想要理解为什么我的代码不起作用。代码：

var app = angular.module('app', ['appModule']).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');});

var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
    return{
        restrict   : 'E',        
        scope      : {},      
        //transclude : true,      // it has HTML content
        link       : function(scope, element, attrs, controllers){
            scope.fullName = attrs.first + " " + attrs.second
        },
        tempalte   : '<h1>[[ fullName ]]</h1>'
    }
});

在我的HTML中

<name data-first="Jack" data-second="Nollan"></name>
<name data-first="Chris" data-second="John"></name>

我包括angular和我的脚本。角度工作，我测试。我的结果中的代码什么都没打印（任何人都可以帮助我吗？

P.S。如果你能解释一下transclude : true,我会非常感激。

Answer 1

首先，指令中的模板拼写错误，其次，在HTML中，您需要使用{{ fullName }}代替[[ fullName ]]

你的指示应该是：

var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
  return {
      restrict   : 'E',        
      scope      : {},      
      //transclude : true,      // it has HTML content
      link       : function(scope, element, attrs, controllers){
          scope.fullName = attrs.first + " " + attrs.second
      },
      template   : '<h1>{{ fullName }}</h1>'
  }
});

这是plnkr

<强> Transclude：使用transclude可以将HTML注入到指令中。在指令本身中，您可以放置ng-transclude指令，Angular会将此替换为您要注入的HTML。

在您的示例中，如果您想在人员姓名后面显示“打招呼”文本，您可以将指令更改为：

var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
return{
    restrict   : 'E',        
    scope      : {},      
    transclude : true,      // it has HTML content
    link       : function(scope, element, attrs, controllers){
        scope.fullName = attrs.first + " " + attrs.second
    },
    template   : '<h1>{{ fullName }} <ng-transclude></ng-transclude></h1>'
}
});

在HTML中，您可以在<name />元素中输入文字，如下所示：

<name first="Jack" second="Nollan"> says Hello</name>

然后，Angular将在您的指令模板中放置ng-transclude指令的任何地方插入“Hello”文本。这是显示此内容的plnkr。

不要在角度工作指令

1 个答案: