Question

我正在尝试将此JSFiddle转换为AngularJS：http://jsfiddle.net/danlec/nNesx/

这是我的尝试@ JSFiddle：http://jsfiddle.net/leighboone/U3pVM/11279/

var onAuthorize = function () {
    updateLoggedIn();
    $scope.testname = "this works";
    Trello.members.get("me", function (member, $scope) {

        var test = member.fullName;
        console.log(test)
        $scope.$apply(function(){$scope.applytest = member.fullName;})
        $scope.member = member.fullName;

    });
};

使用此代码，我似乎无法将member.fullName分配给$scope.member。根据其他问题中的一些建议，我尝试使用$scope.$apply(function(){})，但这会导致错误

undefined不是函数

我不确定还有什么可以尝试的。：（

Answer 1

我想通了，我需要将它设置为rootScope

$rootScope.$apply(function(){$rootScope.applytest = member.fullName;})

Answer 2

您可以在下面看到正确的角度代码工作小提琴http://jsfiddle.net/ObiOne86/U3pVM/11292/

<强> HTML 连接到Trello

    </div>

    <div id="loggedin" ng-show="isLoggedIn">

        <div id="header">Logged in to as <span id="fullName">{{fullName}}</span>  <a ng-click="logout()" id="disconnect" href="#">Log Out</a>

        </div>
        <div id="output">
            <div ng-show="loadingCards">Loading Cards...</div>
            <div ng-repeat="card in cards">{{card}}<a href="{{card.url}}" target="trello" class="card">{{card.name}}</a>

            </div>
        </div>
    </div>
</div>

<强>的Javascript

function calendarCntrl($scope) {

$scope.cards = [];
$scope.fullName = '';
$scope.loadingCards = false;

$scope.logout = function () {
    Trello.deauthorize();
};
$scope.login = function () {
    alert('logging in');
    Trello.authorize({
        type: "popup",
        success: onAuthorize
    });
};

$scope.$watch(function () {
    return Trello.authorized();
}, function (val) {
    $scope.isLoggedIn = val;
});

function onAuthorize() {

    Trello.members.get("me", function (member) {
        $scope.fullName = member.fullName;

        $scope.loadingCards = true;
        // Output a list of all of the cards that the member 
        // is assigned to
        Trello.get("members/me/cards", function (cards) {

            $scope.cards.length = 0;
            angular.extend($scope.cards, cards);
            $scope.loadingCards = false;
        });
    });

};

Trello.authorize({
    interactive: false,
    success: onAuthorize
});

}

<强> CSS

body {
font-family: arial;
font-size: 12px;
}
#loggedout {
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
}

#header {
    padding: 4px;
    border-bottom: 1px solid #000;
    background: #eee;
}
#output {
    padding: 4px;
}
.card {
    display: block;
    padding: 2px;
}

Angular $ scope不应用于回调函数，即使使用$ scope。$ apply

2 个答案: