Question

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));
    };

问题是，即使我可以看到此._ $ 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>

提前感谢您提供此处提供的任何帮助。

Answer 1

因此，结果::在Angular模板中定义了一次性绑定。这实际上意味着，例如，只要运行以下表达式：

{{::modalIssue.issue.getTitle()}}

并返回一个未定义的值，它被认为是稳定的，表达式永远不会再次运行。因此，从模板中的每个相关行中删除::解决了问题。

文档：https://docs.angularjs.org/guide/expression（@see一次性绑定）

连续调用Angular时模板内容不更新

1 个答案: