对于Angular来说还很陌生,并且在整个演出中进行搜索之后,我根本无法找到解决问题的方法。
我在指令/控制器中具有以下功能:
ModalIssueController.prototype.openModal = function (e, issue) {
this._dataService.getMain().then(function (model) {
this._$scope.modalIssue.open = true;
this._$scope.modalIssue.issue = model.getIssueById(issue);
this._windowService.setModalOpen(true);
}.bind(this));
};
每当用户单击列表中的其他问题时,就会调用上述功能。这将打开一个模式并显示与问题相关的内容。
通过关闭按钮关闭模态时,将调用以下命令:
ModalIssueController.prototype.closeModal = function () {
this._$scope.modalIssue.open = false;
this._windowService.setModalOpen(false);
this._$timeout(function () {
this._$location.url('/');
}.bind(this));
};
问题是,即使我可以看到this ._ $ scope.modalIssue.issue的值发生更改以反映所单击的新问题,但模式中的内容也从未更改,而是继续显示来自首先选择的问题;(
我在这里想念什么吗?我是否需要添加其他步骤以确保更新模板中的数据?
这是指令“设置”:
var ModalIssueDirective = function () {
return {
restrict: 'A',
replace: true,
scope: true,
controller: ModalIssueController,
templateUrl: '/app/lorax/directives/modal-issue.tpl.html'
};
};
这是我正在填充的模板:
<section class="modal modal--fade-show modal--issue" ng-show="modalIssue.open" >
<a href="#" class="modal__close modal__close-absolute icon-close" data-lorax-prevent-default ng-click="modalIssue.closeModal()">Close</a>
<h1 class="detail-header-title">{{::modalIssue.issue.getTitle()}}</h1>
<div class="detail-main__copy">{{::modalIssue.issue.getNarrative()}}</div>
<header class="detail-link__header">
<h1>{{::modalIssue.issue.getMiscLocale().mozDoingLabel}}</h1>
</header>
<p class="detail-link__copy">{{::modalIssue.issue.getMozActionCopy()}}</p>
<a ng-if="::modalIssue.issue.getMozActionLink().length === 1" href="{{::modalIssue.issue.getMozActionLink()[0].url}}" class="btn detail-link__btn">{{::modalIssue.issue.getMozActionLink()[0].copy}}</a>
<a ng-if="::modalIssue.issue.getMozActionLink().length > 1" ng-repeat="link in ::modalIssue.issue.getMozActionLink()" href="{{link.url}}" class="detail-link__multiple">{{link.copy}}<span class="icon-arrow-right"></span></a>
<header class="detail-link__header">
<h1>{{::modalIssue.issue.getMiscLocale().yourDoingLabel}}</h1>
</header>
<p class="detail-link__copy">{{::modalIssue.issue.getYourActionCopy()}}</p>
<a ng-if="::modalIssue.issue.getYourActionLink().length === 1" href="{{::modalIssue.issue.getYourActionLink()[0].url}}" class="btn detail-link__btn">{{::modalIssue.issue.getYourActionLink()[0].copy}}</a>
<a ng-if="::modalIssue.issue.getYourActionLink().length > 1" ng-repeat="link in ::modalIssue.issue.getYourActionLink()" href="{{link.url}}" class="detail-link__multiple">{{link.copy}}<span class="icon-arrow-right"></span></a>
</section>
在此先感谢您提供的任何帮助。
最佳答案
因此,事实证明::在Angular模板中定义了一次绑定。这实际上意味着,例如,一旦运行了以下表达式:
{{::modalIssue.issue.getTitle()}}
并且它返回的值不是未定义的,它被认为是稳定的,并且该表达式将不再运行。因此,从模板的每个相关行中删除::即可解决此问题。
Docs:https://docs.angularjs.org/guide/expression(@ see一次性绑定)