Javascript 如何修改指令'；s templateURL基于其控制器中的值？

我有以下AngularJS指令及其控制器

我不想将HTML直接输入指令的

template

字段，而是基于相关控制器中的整数

aB

和

aC

的值设置

templateURL

如果

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);

});

---

您可以改用ngInclude：

myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        myObject: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'myDrCtrl',
      bindToController: true,
      template: '<div ng-include="myObject.currentPath"></div>'

    };
  }
);

myApp.controller('myDirectiveCtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return self.myObject}, function (objVal) {
         objVal.currentPath = 'bar.html';
         if(objVal.aB + objVal.aC >= 10){
             objVal.currentPath = 'foo.html';
         }
    },true);
});

myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
myObject:“=”
},
控制器：“myDirectiveCtrl”，
controllerAs:'myDrCtrl'，
bindToController：对，
模板：“”
};
}
);
myApp.controller（'myDirectiveCtrl'，函数（$scope）{
var self=这个；
$scope.$watch（函数（）{return self.myObject}，函数（objVal）{
objVal.currentPath='bar.html'；
如果（objVal.aB+objVal.aC>=10）{
objVal.currentPath='foo.html'；
}
}，对）；
});

您可以改用ngInclude：

myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        myObject: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'myDrCtrl',
      bindToController: true,
      template: '<div ng-include="myObject.currentPath"></div>'

    };
  }
);

myApp.controller('myDirectiveCtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return self.myObject}, function (objVal) {
         objVal.currentPath = 'bar.html';
         if(objVal.aB + objVal.aC >= 10){
             objVal.currentPath = 'foo.html';
         }
    },true);
});

myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
myObject:“=”
},
控制器：“myDirectiveCtrl”，
controllerAs:'myDrCtrl'，
bindToController：对，
模板：“”
};
}
);
myApp.controller（'myDirectiveCtrl'，函数（$scope）{
var self=这个；
$scope.$watch（函数（）{return self.myObject}，函数（objVal）{
objVal.currentPath='bar.html'；
如果（objVal.aB+objVal.aC>=10）{
objVal.currentPath='foo.html'；
}
}，对）；
});
在创建指令作用域之前，指令的

模板

/

模板URL

选项得到评估。所以基本上你不能在

templateUrl

函数中获取作用域变量

但您可以通过使用

ng include

指令解决这个问题，表达式将根据范围变量值动态创建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>'
    };
  }
);

myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
myObject:“=”
},
控制器：“myDirectiveCtrl”，
controllerAs:'myDrCtrl'，
bindToController：对，
模板：“”
};
}
);
在创建指令作用域之前，指令的

模板

/

模板URL

选项得到评估。所以基本上你不能在

templateUrl

函数中获取作用域变量

但您可以通过使用

ng include

指令解决这个问题，表达式将根据范围变量值动态创建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>'
    };
  }
);

myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
myObject:“=”
},
控制器：“myDirectiveCtrl”，
controllerAs:'myDrCtrl'，
bindToController：对，
模板：“”
};
}
);

然后在HTML文件中，我像这样访问aB和aC的值：

aB:{{myDrCtrl.myObject.aB}}aC是：{{myDrCtrl.myObject.aC}

。有没有更干净的方法从那里访问它们？然后在HTML文件中，我像这样访问aB和aC的值：

aB:{{myDrCtrl.myObject.aB}}aC是：{{myDrCtrl.myObject.aC}

。有没有更干净的方法从那里访问它们？