Angular ui.router 重新加载模板

Posted 2023-05-09

【中文标题】Angular ui.router 重新加载模板

【英文标题】：Angular ui.router Reload Template

【发布时间】：2017-04-24 22:16:23

【问题描述】：

首先，很抱歉问了一个很长的问题，但它必须是这样的。可惜……

我有几个模板和几个路由逻辑，它们都链接在单独的文件中。由于某种原因，我要加载的模板（取决于所选区域）不加载其区域模板。如果我第二次单击它，它会加载。请注意我已经尝试过这个主题的解决方案：

Reloading current state - refresh data

没有什么对我有用。

我已设法通过在 html 代码中内嵌 "reload:true" 来解决其中一个（另一个区域）问题，如下所示：

<a data-ui-sref="uk-web" data-ui-sref-opts="reload:true">Energy Consultant</a>

现在我对另一个模板做了同样的事情，但它不起作用。这是我的html：

<div class="btn us-btn" data-ng-controller="carCtrlUs">
            <script type="text/ng-template" id="careersTplUs.html">
                <div class="closer">
                    <span class="close-me" data-ng-click="ok()">X</span>
                </div>
                <uib-accordion close-others="true">
                    <div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false">
                        <uib-accordion-heading>
                            <p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open"></i>
                            </p>
                        </uib-accordion-heading>
                        <ul>
                            <li><a data-ui-sref="us-web" data-ui-sref-opts="reload:true">Energy Consultant</a></li>
                            <li><a data-ui-sref="us-crm" data-ui-sref-opts="reload:true">Client Relationship Manager</a></li>
                        </ul>
                    </div>
                    <div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false">
                        <uib-accordion-heading>
                            <p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open"></i>
                            </p>
                        </uib-accordion-heading>
                        <ul>
                            <li><a data-ui-sref="us-web" data-ui-sref-opts="reload:true">Web Developer</a></li>
                            <li><a data-ui-sref="us-crm" data-ui-sref-opts="reload:true">Marketing Coordinator</a></li>
                        </ul>
                </div>
        </uib-accordion>
    <div class="show-me" ui-view></div>
     </script> 
     <button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button>
</div>

app.js：

var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);

控制器，对于这个模板：

app.controller('carCtrlUs', function($scope, $http, $uibModal) 
    $http.get('json/jobs-us.json').then(function(response) 
        $scope.placeholder = response.data.default;
        $scope.specs = response.data.specs;

        $scope.open = function() 

            var modalContent = $uibModal.open(
                templateUrl: 'careersTplUs.html',
                controller : 'modalContentCtrlUs',
                controllerAs: '$ctrl',
                size: 'lg',
                backdropClass: 'backdropOver',
                openedClass: 'modal-opened',
                resolve:  
                    items: function()  return $scope.specs; ,
                    items2: function()  return $scope.placeholder;
                
            )
        console.log($scope.placeholder);
        console.log($scope.specs);
        console.log($scope.specs.web-dev);
        
    );
);

app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) 
    $scope.specs = items;
    $scope.placeholder = items2;
    $scope.ok = function() 
        $uibModalInstance.close();
    
);

factory.js：

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
    $stateProvider
        .state("us-intro", 
            url:"/intro",
            templateUrl: "templates/us/start.html"
        )
    $stateProvider
        .state("us-web", 
            url: "/web-developer/",
            templateUrl: "templates/us/web-developer.html",
        )
        .state("us-crm", 
            url: "/crm/",
            templateUrl: "templates/us/crm.html"
        )
        /*next .state*/
]);

模板：

<div ng-repeat="(k, v) in specs.webdev">
    <h3>::v["job-title"]</h3>
    <p>::v["job-body"]</p>
    United States Apply Here:
    <p>::v["job-apply"]</p>
</div>

如您所见，我正在使用 ui-bootstrap（模态和手风琴，因为它们都在模态窗口中）。

我该怎么做才能让它立即刷新？我被困了好几天，这令人沮丧......我在这里做错了什么？

编辑：请注意，我知道“::”用于单向数据绑定。我试过没有它，结果是一样的。我可能可以通过将有问题的数据放在.json 文件中来解决这个问题，但这确实是一个丑陋的黑客攻击。

【参考方案1】：

<div ng-repeat="(k, v) in specs.webdev">
    <h3>::v["job-title"]</h3>
    <p>::v["job-body"]</p>
    United States Apply Here:
    <p>::v["job-apply"]</p>
</div>

“::”避免数据绑定以减少摘要周期。尝试删除它们。

【讨论】：

对不起，我应该写的。我知道 :: 用于单向绑定，并且我已经尝试过。结果相同。

【参考方案2】：

<a data-ui-sref="uk-web" data-ui-sref-opts="reload:true">Energy Consultant</a>

//应该是

<a data-ui-sref="us-web" data-ui-sref-opts="reload:true">Energy Consultant</a>

【参考方案3】：

我已经解决了这个问题。我想做的是使“URL”相同。我已经更改了 url 以通过区域代码显示区域，所以它现在可以工作了。

例如：

英国：

$stateProvider
        .state("de-web", 
            url: "/web-developer-de",
            templateUrl: "templates/de/web-developer.html",
        )
        .state("de-crm", 
            url: "/crm-de",
            templateUrl: "templates/de/crm.html"
        )

意大利：

$stateProvider
        .state("it-web", 
            url: "/web-developer-it",
            templateUrl: "templates/it/web-developer.html",
        )
        .state("it-crm", 
            url: "/crm-it",
            templateUrl: "templates/it/crm.html"
        )

美国：

$stateProvider
        .state("us-web", 
            url: "/web-developer-us",
            templateUrl: "templates/de/web-developer.html",
        )
        .state("us-crm", 
            url: "/crm-us",
            templateUrl: "templates/de/crm.html"
        )

虽然这行得通，但我并不高兴。如何实现模板加载到同一个url？