简单的动态指令 AngularJS答案

【问题标题】：Simple Dynamic Directive AngularJS简单的动态指令 AngularJS
【发布时间】：2014-09-16 23:04:26
【问题描述】：

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

这是我目前所拥有的简化版本...

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 文件

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

【问题讨论】：

标签： javascript angularjs templates dynamic angularjs-directive

【解决方案1】：

尝试为 templateUrl 使用函数。

【讨论】：

【解决方案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)
    }
})

【讨论】：

如何将产品 ID 注入指令中？我收到“未定义产品 ID”错误。
您必须将其映射到隔离范围。 docs.angularjs.org/guide/directive

【解决方案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'    
  }
});

【讨论】：