运行 带有 ng-click 的控制器

Question

.controller('randomImageController', function($scope, $http, Image) {
    $scope.loading = true;
    Image.random()
    .success(function(data) {
        $scope.image = data[0];
        $scope.loading = false;
        console.log(data);
    });
});

这会在调用 url /random 时加载。它调用我的 API 和 returns 来自 table.

的随机数据库行

我现在的目标是在该模板中有一个按钮，它将再次调用该函数并显示另一个随机图像。

<section class="random-image">
    <img src="/images/{{ image.name }}">
    <button type="button" name="button" ng-click="randomImage();">Load New</button>
</section>

如果我将控制器更改为如下所示：

.controller('randomImageController', function($scope, $http, Image) {
    $scope.loading = true;
    Image.random()
    .success(function(data) {
        $scope.image = data[0];
        $scope.loading = false;
        console.log(data);
    });
    $scope.randomImage = function() {
        console.log('reload');
    };
});

重新加载显示在控制台中，但我不知道如何 'recall' 就像那个控制器一样？

Answer 1

您应该将可重用代码移动到一个函数中，并在必要时在控制器加载时调用该函数。

.controller('randomImageController', function($scope, $http, Image) {

  $scope.randomImage = function() {
    $scope.loading = true;
    Image.random()
      .success(function(data) {
        $scope.image = data[0];
        $scope.loading = false;
        console.log(data);
      });
  };

  $scope.randomImage();
});

通过这种方式，您不是 "reloading the controller"，而是重新执行可重用代码。