The $scope in Angular doesn't seem to be working as expected in the callback function, despite using $scope

Question

The $scope in Angular doesn't seem to be working as expected in the callback function, despite using $scope

I'm currently working on converting the JSFiddle found here to AngularJS: http://jsfiddle.net/danlec/nNesx/

Here is my attempt in 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;

    });
};

Despite trying various solutions, I am facing difficulties assigning member.fullName to $scope.member. Even after using $scope.$apply(function(){}), an error keeps popping up:

undefined is not a function

It's frustrating as I'm running out of ideas on how to resolve this issue. :(

javascript angularjs angularjs-scope

Answer 1

Answer №1

Check out the correct angular code snippet below To view the working fiddle, click here

HTML Connect To 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;
}

Answer 2

Check out the correct angular code snippet below To view the working fiddle, click here

HTML Connect To 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;
}

Answer 3

Answer №2

After some consideration, I have come to the conclusion that setting it to the rootScope is the solution.

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

Answer 4

After some consideration, I have come to the conclusion that setting it to the rootScope is the solution.

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

The $scope in Angular doesn't seem to be working as expected in the callback function, despite using $scope

Answer №1

Answer №2

Similar questions

Searching for TypeScript type definitions for the @Angular libraries within Angular 2

What is the reason for instanceof Map returning false?

What is the best way to include the API body in a GET request?

React App folders are not being properly installed through NPX

Next js is repeatedly calling a Firestore document in multiple instances during the fetching process

Determining if an element corresponds to a By-object in Selenium using JavaScript

Retrieving Django view information using AJAX

Running a shared function following every Promise resolution

Click on the submenu to expand it, then simply select the desired option to navigate

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

The jQuery script is functioning flawlessly in one specific direction

Using Three.js to rotate a camera-followed sphere in the scene

The initial click may not gather all the information, but the subsequent click will capture all necessary data

What's the deal with $routeProvider in angularJS?

What is the best way to showcase the information stored in Firestore documents on HTML elements?

Display the execution duration on an HTML document

Use JavaScript to input array elements into a selection of cells in Excel

Javascript - Issue with Ajax causing additional commas in JSON responses

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

ExpressJS: How to resolve the undefined error in Express session