javascript - 如何根据指令 Controller 中的值修改指令的 templateURL？

Question

我有以下 AngularJS 指令及其 Controller 。

我不想直接在指令的 template 字段中输入 HTML，而是想根据整数 aB 的值设置 templateURL 和关联 Controller 中的 aC。

如果aB + ac >= 10，我希望它使用foo.html，否则我希望它使用bar.html。我怎样才能做到这一点？

myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        myObject: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'myDrCtrl',
      bindToController: true,
      template: 'aB={{myDrCtrl.myObject.aB}} aC={{myDrCtrl.myObject.aC}}'

    };
  }
);

myApp.controller('myDirectiveCtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return self.myObject}, function (objVal) {
        console.log("watch fired");
        console.log('objVal.aB = ', objVal.aB);
        console.log('objVal.aC = ', objVal.aC);
    },true);

});

Answer 1

指令的

template/templateUrl 选项在创建指令作用域之前进行评估。所以基本上你无法在 templateUrl 函数内部获取作用域变量。

但是，是的，您可以通过使用 ng-include 指令来解决这个问题，with 表达式将根据作用域变量值动态创建一个 URL。

指令

myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        myObject: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'myDrCtrl',
      bindToController: true,
      template: '<ng-include src="(aB + ac >= 10) ? \'foo.html\': \'bar.html\'"></ng-include>'
    };
  }
);