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

该指令依赖于您通过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 2

在控制器中使用$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 }
        ];
    });

正如您在示例项目中看到的，拼图是for循环中的谜题元素。

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

虽然@logan的答案对我来说看起来很合乎逻辑，但它不起作用。作为一个临时解决方案，我已经制作了如下代码并且它可以工作。

我知道它不是一个优雅的解决方案，但它现在至少适用于我。

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

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

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

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

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

3 个答案: