在视图中工作的方法在控制器中不起作用

Question

我有以下观点。

Moves: <strong>{{puzzle.api.moves}}</strong>

<button class="button" ng-click="puzzle.api.shuffle()">Shuffle</button>

<sliding-puzzle api="puzzle.api" size="{{cols}}x{{puzzles.cols}}" src="{{src}}"></sliding-puzzle>

在上面的视图中，方法 shuffle() 在按钮 ng-click 事件上工作正常。

puzzle.api.shuffle()

但是当我在控制器中使用它时，它不起作用。我知道拼图不适用于控制器，因为它来自自定义指令。

如何在我的控制器中使用这个功能？

下面是我的完整控制器。

app.controller('HomeCtrl', function($scope, slidingPuzzle) {

    $scope.showOptions = function() {
       puzzle.api.shuffle(); //puzzle is not defined
       $scope.puzzle.api.shuffle(); //puzzle is undefined
    }

});

我正在使用下面给出的自定义指令。

https://github.com/pdanis/angular-puzzle/blob/master/app/js/puzzle/slidingPuzzle.js

Answer 1

在您的控制器中使用 $scope.puzzle.api.shuffle()。查看 angular-puzzle

上的样本

您需要在控制器中定义拼图。在示例中 $scope.puzzles 定义如下：

 app.controller('slidingAdvancedCtrl', function($scope) {
        $scope.puzzles = [
            { src: './img/misko.jpg', title: 'Miško Hevery', rows: 4, cols: 4 },
            { src: './img/igor.jpg', title: 'Igor Minár', rows: 3, cols: 3 },
            { src: './img/vojta.jpg', title: 'Vojta Jína', rows: 4, cols: 3 }
        ];
    });

正如您在示例项目中看到的那样，puzzle 是 for 循环中 puzzles 的一个元素。

<fieldset id="sliding-advanced" ng-controller="slidingAdvancedCtrl">
        <legend>Advanced</legend>
        <div ng-repeat="puzzle in puzzles">
            <h2>{{puzzle.title}}</h2>
            <div class="src">
                <input type="text" ng-model="puzzle.src"/>
            </div>
            <div class="status">
                moves: <strong>{{puzzle.api.moves}}</strong><br/>
                solved: <strong>{{puzzle.api.isSolved()}}</strong>
            </div>
            <div class="size">
                rows: <input type="text" ng-model="puzzle.rows" size="2"/>
                cols: <input type="text" ng-model="puzzle.cols" size="2"/><br/>
                <button ng-click="puzzle.api.shuffle()">shuffle</button>
                <button ng-click="puzzle.api.solve()">solve</button>
            </div>
            <sliding-puzzle api="puzzle.api" size="{{puzzle.rows}}x{{puzzle.cols}}" src="{{puzzle.src}}"></sliding-puzzle>
        </div>
    </fieldset>

所以你可以在你的控制器中做

 $scope.puzzles[0].shuffle();

Answer 2

该指令依赖于您通过 api 属性为其提供一个变量，它将通过双向绑定填充该变量。这不是您通常在指令中看到的内容。

如果您的指令在视图中的用法如下所示：

<sliding-puzzle api="puzzle" size="{{rows}}x{{cols}}" src="{{src}}"></sliding-puzzle>

并且您的控制器设置 rows 和 cols:

$scope.rows = 3;
$scope.cols = 4;

然后 $scope.puzzle 将在您使用 $scope.showOptions() 时填充。

$scope.showOptions = function() {
  $scope.puzzle.shuffle();
};

Plnkr demonstrating this。查看您的控制台以获取输出。

Answer 3

虽然@logan 的回答对我来说看起来很好而且合乎逻辑，但它不起作用。作为临时解决方案，我编写了如下代码并且可以正常工作。

我知道这不是一个优雅的解决方案，但它对我有用，至少现在是这样。

在视图中工作时，我将值传递给控制器。

<button ng-click="shuffle(puzzle.api)">shuffle</button>

在控制器中，我正在使用它。

$scope.showOptions = function(api) {
   api.shuffle(); 
}

在视图中工作的方法在控制器中不起作用

Methods working in view does not work in controller

angularjs

angularjs-directive