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.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

您应该为模态组件添加绑定，并使用$scope再次将其绑定到this.$onInit，以确保在 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：无法将文本传递给模态作为组件

1 个答案: