來自控制器的指令模板

Question

我正在嘗試根據其控制器變量在模板中加載指令。 我在這里看到的其他問題取決於將字符串傳遞到指令中，而不是從控制器中獲取它。

指示：

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)

如何強制將語言參數作為控制器變量而不是文字字符串求值？

Answer 1

嘗試

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

...您不需要{{}}大括號

這是使用angular 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';
        }
      }
    }
}

Answer 2

不要在指令定義上使用{{}} ，也不要在范圍定義中使用'='。

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