Question

我有一个应用程序，它使用一个独立的指令，无论如何都与应用程序无关但可以从任何地方用$ scope。$ emit（）调用。我希望它能够根据从控制器中$ scope。$ on（）函数收到的产品ID加载内部动态模板。

这是我到目前为止的简化版本......

的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

尝试使用templateUrl的函数。

Answer 2

可能是这样的：

.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'    
  }
});

简单的动态指令AngularJS

3 个答案: