angular 1.6: 无法将文本作为组件传递给模态

Question

我有一个工厂：

  ngapp.factory('ErrorService',["$uibModal", function ErrorService($uibModal) {
    return {
      showError: function(errorText) {
        var modalInstance = $uibModal.open({
          animation: true,
          component: 'errorDialog',
          resolve: {
                errorText: function () {
                    return errorText;
                }
            } 
        });
      }
    }
  }]);

一个对话框，使用 angular bootstrap 模态组件：

angular.module('myapp').component('errorDialog', {
  templateUrl: 'errorDialog.html',
  controller: function ($scope) {

    $scope.title = "Something went wrong!";
    $scope.error = $scope.errorText || "Generic error";

    $scope.cancel = function () {
      this.dismiss({$value: 'cancel'});
    };
  }
});

...作为模板：

<script type="text/ng-template" id="errorDialog.html">
  <div class="modal-header">
    <h3>{{$title}}</h3>
  </div>
  <div class="modal-body" id="dialogBody">
    <div class="errorText">{{error}}
      <button class="btn btn-primary yes" type="submit" ng-click="cancel()">Ok</button>
    </div>
  </div>
</script>

我无法 error 显示我的 errorText 像这样使用它时:

ErrorService.showError("Failed to connect.");

Answer 1

您应该将绑定添加到模态组件，并使用 this.$onInit 再次将其绑定到 $scope，以确保绑定在之后发生 resolve 已经..解决了。

angular.module('myapp').component('errorDialog', {
  bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  templateUrl: 'errorDialog.html',
  controller: function ($scope) {

    this.$onInit = function() {
      $scope.error = this.resolve.errorText;
    }
  }
});

小建议，在你的component中可以加上：

controllerAs: '$something',
controller: function() {

    // Bind it to this
    var $something = this;

    // Use $something instead of $scope from now on
    $something.text = 'Hello';

    // Or with resolve
    $something.$onInit = function() {
        $something.error = $something.resolve.errorText;
    }
}

然后，在您的模板中，您可以使用：

<span>{{$something.error}}</span>

这完全消除了对 $scope 的需要，并使调试变得容易得多，因为所有内容都包含在它自己的范围内（在本例中，您的模态）。您将 errorText 绑定到 $scope，但它在您的组件中仍然不可用。这可能非常令人困惑。

在你最终得到所谓的 Scope soup 之前，尽可能少地使用 $scope 是非常值得的。

angular 1.6: 无法将文本作为组件传递给模态

angular 1.6: can't get to pass text to modal as component

factory

angularjs

angular-bootstrap