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并从表中返回一个随机数据库行。

我现在的目标是在该模板中设置一个按钮，再次调用该功能并显示另一个随机图像。

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

重新加载显示在控制台中，但我无法弄清楚如何回忆＆＃39;因为它是那个控制器？

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

通过这种方式，您不是“重新加载控制器”，而是重新执行可重用代码。

使用ng-click运行控制器

1 个答案: