来自控制器的指令模板

Directive template from controller

本文关键字：指令 控制器      更新时间：2023-09-26

我正试图让我的指令加载到一个基于它的控制器变量的模板中。我在这里看到的其他问题依赖于一个字符串被传递到指令中，而不是从控制器中获取它。

指令：

import {LanguageController} from "./language.controller.ts";
export class LanguageSelectDirective {
    static NAME: string = "selectLanguage";

    static factory(): ng.IDirective {
        let directive = {
            restrict: "E",
            link: function() {},
            templateUrl: function(elem, attrs){
                return "./" + attrs.language + "/language.html"
            },
            scope: {
                language: "@"
            },
            controller: LanguageController,
            controllerAs: "lc",
            bindToController: true
        };
        return directive;
    }
}

控制器：

export class LanguageController{
   private selectedLanguage: String;
   //More stuff
}

模板：

<select-language ng-hide="authenticated" language="{{lc.selectedLanguage}}"></select-language>



我一直看到的错误是：

GET http://localhost:3000/%7B%7Blc.selectedLanguage%7D%7D/language.html 404 (Not Found)

如何强制它将语言参数计算为控制器变量，而不是文字字符串？

尝试

<select-language ng-hide="authenticated" language="lc.selectedLanguage"></select-language>

你不需要{{}}大括号

这是一个使用角度1.4的plnkr：http://plnkr.co/edit/HOjKKm

这是指令函数：

let directive={
  return {
      restrict: 'E',
      scope: {
        language: '=', //= not @ ensures the model value is interpreted
        'content': '=' //we are binding to an object
      },
      template:  '<ng-include src="getTemplateUrl()"></ng-include>',
      controller: function($scope){
        $scope.getTemplateUrl=function(){
          return $scope.language+'_language.html';
        }
      }
    }
}

不要在指令定义中使用{{}}，也不要在作用域定义中使用'='。

<select-language ng-hide="authenticated" language="lc.selectedLanguage"></select-language>
相关文章：