まず、長い質問には申し訳ありませんが、そのようなものでなければなりません。残念ながら...角度ui.routerリロードテンプレート
私は2つのテンプレートと2つのルーティングロジックをすべて別々のファイルにリンクしています。何らかの理由で、ロードするテンプレート(選択した領域に依存)は、そのリージョンテンプレートをロードしません。 2回目にクリックするとロードされます。
Reloading current state - refresh data
何が私のために働いていない:私はこのトピックから、これまでのソリューションを試してみましたのでご注意ください。
私はこのように、htmlコードで"{reload:true}"
インラインを配置することによって、そのうちの一つ(別の領域)を解決するために管理している:
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
は今、私は別のテンプレートのために同じことをやったし、それが機能していません。
<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*/
}]);
テンプレート:
これは私のhtmlです<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(モーダルとアコーディオンはすべてモーダルウィンドウなので)を使用しています。
瞬時にリフレッシュするにはどうすればよいですか?私はこれに数日間詰まっていて、それはイライラしています...私はここで何が間違っていますか?
EDIT:片方向データバインディングの場合、「::
」がわかっています。私はそれなしで試した結果は同じです。おそらく問題のデータを.json
ファイルに置くことでこれを解決できますが、それは実際には醜いハックになります。
申し訳ありませんが、私は書いたはずです。私は知っている::片方向バインディングのためであり、私はそれなしで試した。同じ結果。 –