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"，按徽标按钮也不会执行任何操作，即使它设置为 let style = { backgroundImage: "url(image.jpg)" } export default class Weather extends Component { render() { componentDidMount(){ this.changeBackground(); } componentDidUpdate(){ this.changeBackground(); } changeBackground = () =>{ if(this.props.code === 300) { style.backgroundImage = "url(rain.jpg)" } } return ( <div style={style} > { this.props.city && this.props.country && <p>Location: {this.props.city}, {this.props.country}</p> } { this.props.temperature && <p>Temperature: {this.props.temperature}</p> } { this.props.humidity && <p>Humidity: {this.props.humidity}</p> } { this.props.description && <p>Conditions: {this.props.description}</p> } { this.props.error && <p> {this.props.error} </p> } { this.props.code === 600 && 601 && 602 && 611 && 612 && 615 && 616 && 620 && 621 && 622 && <p>Change to Snow background</p>} { this.props.code === 200 && 201 && 202 && 210 && 210 && 211 && 212 && 221 && 230 && 231 && 232 && <p>Change to Thunderstorm background</p> } { this.props.code === 300 && 301 && 302 && 310 && 311 && 312 && 313 && 314 && 321 && 500 && 501 && 502 && 503 && 504 && 511 && 520 && 521 && 531 && <p>Change to Raining background</p> } { this.props.code === 800 && <p>Change to Clear Sky background</p> } { this.props.code === 801 && 802 && 803 && 804 && <p>Change to Cloudy background</p> } </div> ) } }``` 也会切换整个页面。 Activate方法不会产生任何日志，并且在按下时似乎不会运行。

为什么会这样？