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

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>

在上面的视图中，方法霉运()在ng单击事件按钮上工作得很好。

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

虽然@logan的回答对我来说很好，也很符合逻辑，但它不起作用。作为一种临时解决方案，我已经按照下面的方式编写了代码，并且它可以工作。

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

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

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

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

$scope.showOptions = function(api) {
   api.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证明了这一点。请参阅控制台以获得输出。

Answer 3

在控制器中使用$scope.puzzle.api.shuffle()。查看角形拼图上的示例

您需要在控制器中定义谜题。在示例中，$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();