Question

我的路由提供程序设置如下：

$routeProvider
.when('/', {
    templateUrl: '/slapppoc/Style Library/TAC/Views/tarification/home.html',
    controller: 'homeController'
         /*
    resolve: {
        // This function will be called before any controller/views are instantiated.
        'initializeApplication': function (initializationService) {                
            return initializationService.initializeApplicationData;
        }
    }*/
})
.when('/createTarif', {
    templateUrl: '/slapppoc/Style Library/TAC/Views/tarification/createTarif.html',
    controller: 'tarificationController'
 })
 .when('/search', {
    templateUrl: '/slapppoc/Style Library/TAC/Views/tarification/Search.html',
    controller: 'searchController'
 })     
.otherwise({ redirectTo: '/' });

现在我在主视图中有这样的div设置 -

<div ng-init="tab=1" >
        <div class="cb" ng-click="tab = 1">tab 1</div>
        <div class="cb" ng-click="tab = 2">tab 2</div>

        <div ng-show="tab == 1">
               How to include html templateurl path here  (createtarif.html)
        </div>

        <div ng-show="tab == 2">
                   How to include html templateurl path here  (search.html)
        </div>
</div>

修改

我也尝试过像这样的ng-include指令 -

<div ng-include src="'/slapppoc/Style Library/TAC/Views/tarification/createTarif.html'"></div>

但它也不起作用。

所以我想在后续div中包含来自templateurl的html。我该怎么做？因此，当切换div时，html内容会自动更改。

感谢您的帮助。

Answer 1

您可以查看ng-include文档https://docs.angularjs.org/api/ng/directive/ngInclude 有例子。

还有另一种方式。你可以添加新的元素指令并包含它

Answer 2

使用ng-include如下:(不含src）

<div ng-include="'/slapppoc/Style Library/TAC/Views/tarification/createTarif.html'" />

而不是

<div ng-include src="'/slapppoc/Style Library/TAC/Views/tarification/createTarif.html'"></div>

官方文档中的示例

<div ng-controller="ExampleController">
    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>
    url of the template: <code>{{template.url}}</code>
    <hr/>
    <div class="slide-animate-container">
        <div class="slide-animate" ng-include="template.url"></div>
    </div>
</div>

在视图div Angularjs中包含路由提供程序templateurl路径

2 个答案: