javascript - 模板内容在连续调用时不会更新Angular

对于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一次性绑定）