简单动态指令AngularJS

Question

I have an application that uses an independent directive not tied to the application in anyway but can be called with $scope.$emit() from anywhere. I would like it to load an internal dynamic template based off of the product id received from the $scope.$on() function in the controller.

Here is a simplified version of what i have so far ...

index.html

<div quote-application ng-show="ifActive"></div> 

path/to/template.html

<form class="application-modal">
    <button>X</button>

    <!-- this is what i would like to by dynamically loaded -->
    <fieldset product="{{productID}}"></fieldset>

    <button>Add Product</button>
    <button>Cancel</button>
</form>

JS File

angular.module('client.quote-app', [])

.controller('quoteCtrl', ['$scope', function($scope) {

    $scope.ifActive = false;

    $scope.productID = '0000';

    $scope.$on('requestQuote', function(event, productID) {
        $scope.ifActive = true; 
        $scope.productID = productID; //this is coming through okay
    });

}])

//this loads fine
.directive('quoteApplication', function() {
    return {
        controller  : 'quoteCtrl',
        templateUrl : 'path/to/template.html'
    }
})

//not sure what to do here ...
.directive('product', function() {
    return {
        //<!-- I want this to load a template 
               based off of the productID every 
               time $scope.on() gets called --!>
        templateUrl : 'path/to' + productID + '.html'
    }
})

Answer 1

尝试对templateUrl使用一个函数。

Answer 2

Maybe something like this:

 .directive('product', function() { function templatePath(pid) { return 'path/to' + pid + '.html' } return { // I want this to load a template // based off of the productID every // time $scope.on() gets called --!> templateUrl : templatePath(productID) } }) 

Answer 3

index.html -

<div class="quote-client" quote-application ng-show="state"></div>

app.html -

<form class="application" ng-submit="">
    <button>X</button>
    <fieldset ng-include="product"></fieldset>
    <button>Add Product</button>
    <button>Cancel</button>
</form>

.js -

angular.module('client.quote-app', [])

.controller('quoteCtrl', ['$scope', function($scope) {

  $scope.state =  false;

  $scope.product = './path/to/' + '0000' + '.html';

  $scope.$on('requestQuote', function(event, product) {
    $scope.product = './path/to/' + product + '.html'; 
    $scope.state = true;
  });

}])

.directive('quoteApplication', function() {
  return {
    controller  : 'quoteCtrl',
    templateUrl : 'path/to/app.html'    
  }
});