Простая динамическая директива AngularJS

Question

У меня есть приложение, которое использует независимую директиву, не привязанную к приложению, в любом случае , но может быть вызвана с $ scope. $ Emit() из любого места. Я бы хотел, чтобы он загружал внутренний динамический шаблон на основе идентификатора продукта, полученного из $ scope. Функция $ on() в контроллере.

Вот упрощенная версия того, что я до сих пор ...

index.html

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

путь/к/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 файла

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

Попробуйте использовать функцию для тем plateUrl.

Answer 2

Может быть что-то вроде этого:

.directive('product', function() { 
 

 
    function templatePath(pid) { 
 
     return 'path/to' + pid + '.html' 
 
    } 
 

 
    return { 
 
     // I want this to load a template 
 
\t \t // based off of the productID every 
 
\t \t // 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'  
    } 
});