Home Angular is working, but $scope not showing up
Reply: 1

Angular is working, but $scope not showing up

Bekay
1#
Bekay Published in 2017-11-14 15:59:51Z

I'm walking through a tutorial on Angular. I've tried following their Dev Guide and searching SO, I'm a little confused with all the versions of Angular.

I have a small app, a to-do app, and I can't get the $scope from my HomeCtrl to appear when the app loads the home template. When I load the home template, it's showing everything except the scope calls in the curly brackets {{ }}.

Here's what I have for my HomeCtrl.js:

 blocitoff.controller('HomeCtrl', ['$scope', '$firebaseArray', '$firebaseObject', function HomCtrl ($scope, $firebaseObject, $firebaseArray) {                          
    alert("hello");
    var ref = firebase.database().ref();
    var list = $firebaseArray(ref);
    $scope.data = $firebaseObject(ref);
    $scope.hello = "no way bill it worked!";                                
}]);

Here's what I have for my home.html:

<body ng-controller="HomeCtrl"> 
<div> 
    <h2> hello there </h2>
    <h3> {{2+5}} </h3>
      I can add: {{ 1 + 2 }}.

    <p> {{$scope.hello}}</p>
    <p> {{ hello }} </p>
</div>
</body>

Thank you for any help or tips.

JLRishe
2#
JLRishe Reply to 2017-11-14 16:09:41Z

You can't use the $scope identifier in the view (the HTML). $scope is only accessible within the JavaScript.

The whole point of $scope is that expressions in the view will, by default, refer to values on the scope. So if you want to access $scope.hello, refer to it as hello, as you are already doing:

<p> {{ hello }} </p>

Working example:

var blocitoff = angular.module('blocitoff', []);

blocitoff.controller('HomeCtrl', ['$scope', function HomCtrl ($scope) {                          
    $scope.hello = "no way bill it worked!";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="blocitoff" ng-controller="HomeCtrl"> 
<div> 
    <h2> hello there </h2>
    <h3> {{2+5}} </h3>
      I can add: {{ 1 + 2 }}.

    <p> {{ hello }} </p>
</div>
</body>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.337356 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO