javascript - AngularJS 为什么我的控制器没有响应？

Question

这是一个很难问的问题，我会尽量简短：

我有一个简单的控制器，我想用它从 API 获取信息并从 trello 填充选择列表。

这是我的控制器：

function TrelloController($scope, $location, $routeParams, $timeout, dialogs, common){
    var vm = this;
    var controllerId = 'TrelloController';
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn(controllerId);
    var logError = getLogFn(controllerId, 'error');
    var scope = $scope;
    var TRELLO = require("trello");
    var key = '<my key>';
    var token = '<my token>';
    var trello = new TRELLO(key, token);

    vm.title = "Trello Controller";
    vm.addCard = addCard;
    vm.getBoards = getBoards;
    vm.toggle = toggle;
    vm.getLists = getLists;
    vm.getListsFromDictionary = getListsFromDictionary;
    vm.isTrelloActive = false;

    activate();

    function activate(){
        common.activateController([], controllerId)
            .then(function () {
                log('Activated Trello Controller');
                initialise();
            });
    }
    function initialise() {
        vm.isTrelloActive = false;
        getBoards();
        getLists();
    }

    function toggle() {
        vm.isTrelloActive = !vm.isTrelloActive;
        log("TOGGLE CLICKED");
    }

    function addCard(cardName, cardDescription, listId) {
        trello.addCard(cardName, cardDescription, listId, function (error, cardAdded) {
            if (error) {
                log("Could Not Add Card: ", error);
            } else {
                log("Card added: ", cardAdded.name);
            }
        });
    }

    function getBoards() {
        trello.getBoards("me", function (error, boards) {
            if (error) {
                log("Could Not Get Boards: ", error);
            } else {
                log("found " + boards.length + " boards");
                console.log(boards);
            }
            scope.boards = boards;
        });
    }

    function getLists(){
        for (var i=0; i<scope.boards.length; i++){
            getListsWithBoardId(scope.boards[i].id, i);
        }
    }

    function getListsWithBoardId(boardId, index){
        trello.getListsOnBoard(boardId, function(error, lists){
            if (error) {
                log("Could Not Get Boards: ", error);
            } else {
                log("found " + lists.length + " lists on board:"+boardId);
                console.log(lists);
            }
            scope.boards[index].lists = lists;
        });
    }

    function getListsFromDictionary(boardId){
        for (var i=0; i<scope.boards.length; i++) {
            if(scope.boards[i].id == boardId){
                return scope.boards[i].lists;
            }
        }
    }
}module.exports = TrelloController;

该控制器旨在用于管理我的对话，简化，这就是对话：

<div data-ng-controller="TrelloController as vm">
    <div class="modal-header">
        <img class="trelloLogo" name="trelloLogo" src="public/content/images/trello-mark-blue.png" alt="Add To Trello" ng-click="vm.toggle}">
        <h3>{{parameter.heading}}</h3>
    </div>
    <div class="modal-body">
        <form name="form">
            <div ng-if="vm.isTrelloActive" class="form-group">
                <label>Board</label>
                <select name="typeInput" class="form-control" ng-required="true" ng-model="form.boardInput">
                    <option selected>Choose Board</option>
                    <option ng-repeat="board in scope.boards" value="{{board.id}}">{{board.name}}</option>
                </select>
            </div>
        </form>
    </div>

    <!-- This section contains parts in the vm.addCard(...) that aren't included in this shortened version of The HTML template, I provided it with the additional fields for context of the API call at the end --> 

    <div ng-if="vm.isTrelloActive" class="modal-footer">
        <button class="btn btn-primary" ng-disabled="!form.$dirty || !form.$valid" ng-click="vm.addCard(form.titleInput, form.descriptionInput, form.listInput)">Add To Board</button>
        <button class="btn btn-default" ng-click="vm.isTrelloActive=false">Cancel</button>
    </div>
</div>

当我在对话中时，按下徽标按钮似乎什么也不做，即使它以前设置为：ng-click="vm.isTrelloActive = !vm.isTrelloActive"它会切换整个页面。activate 方法不会产生任何日志，并且在按下时似乎不会运行。

为什么会这样？

标签： javascriptangularjscontroller