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

Managing field placement as the table height grows: tips and tricks

Controller variable in Angular not being updated in view

Removing value types in select with ngOptions

Navigating through the directories in PUG using the absolute path

Next.js presents a challenge with double-language applications

Transmitting information in segments using Node.js

Adjust the content of an iframe based on the size of the screen

Show the meta-field mp3 and place it in a lightbox container on the portfolio page

Unexpected behavior: Promise.catch() fails to catch exception in AngularJS unit test

Tips for showcasing an image on an HTML page

JQuery is failing to properly return the string containing special characters like apostrophes

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

Changing the value of a specific array element after removing it from a filtered ng-repeat resultList

Best practices for working with HTML elements using JavaScript

What is the method of displaying a querystring on my Angular view page without relying on a controller?

Experiencing problems with CSS compatibility while transitioning from vanilla JavaScript to React

Oops! You can only have one parent element in JSX expressions

What is the best way to transfer a value to the database using a distinct module?

Incorporating CSS Styles in EJS

Change the size of the font with a slider in VueJS