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.
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>
Related
I'm pulling in data from an external site using this code -
<script>
var app = angular.module('myApp', ["ngSanitize"]);
app.controller('aLlCtrl', function($scope, $http) {
var url = 'https://www.hcrlaw.com/wp-json/posts?filter[category]=news_post&filter[posts_per_page]=30';
$http.get(url).then(function(data) {
$scope.data = data.data;
});
});
</script>
<div id="changingArea">
<body ng-app="myApp">
<!--SHOOTING TYPE-->
<div id="All" class="descshoot">
<div ng-controller="aLlCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<p>{{d.excerpt}}</p>
</div>
</div>
</div>
I's pulling in fine, but how can I get rid of tags such as <p> appearing? For example -
I've seen ways in which people use ng-sanitise but from what i understand you have to specify each piece of text you want to target and this would be really inconvenient as it's pulling in lots of posts from Wordpress,
Any help would be much appreciated, thanks!
I have an ionic & angular based project. I get variable node from a service. node's body value is HTML. But when I print {{node.body.und[0].value}} with ionic, it prints HTML codes with tags like <ul><li><strong>Title:</strong> some text</li><ul>
Controller and service part of the code:
.controller('NodeCtrl', function($scope, $stateParams, Node) {
$scope.node = Node.get({nid: $stateParams.nid});
});
.factory('Node', function ($resource) {
return $resource('some-domain.com/api/node/:nid'+'.json');
})
Ionic template:
<ion-view view-title="{{node.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h2>{{node.title}}</h2>
</div>
<div class="item item-body">
{{node.body.und[0].value}}
</div>
</div>
</ion-content>
</ion-view>
How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li><strong>Title:</strong> some text</li><ul>?
All Credits to Will.Harris!!
ng-bind-html, is what you are looking for.
From the Docs, use the ng-bind-html in the view as:
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
and in the controller, assign the scope variable with the html content as:
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}]);
I am new to Angular. I am trying to get data from the Angular controller into Laravel Blade. For some reason it is not working.
The socket.io part is working. I did console.log on $scope.message and it is there.
So the problem is between Angular code and Laravel blade. My code is:
<body ng-app="app">
<div ng-controller="AppCtrl">
<input id="auth_id" type="hidden" value="{{ Auth::user()->id }}" />
<h1>New Users</h1>
<ul>
<li ng-repeat="message in messages">
#{{ message.body }}
</li>
</ul>
</div>
<script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
var app = angular.module('app', [])
.controller('AppCtrl', function ($scope){
var socket = io('http://192.168.10.10:3000');
$scope.id = document.getElementById('auth_id').value;
socket.on("user."+ $scope.id + ":App\\Events\\EventDeletedOrEditedBroadcast", function(data) {
$scope.messages = data.message;
});
});
</script>
</body>
Thanks in advance.
the variable you declare in the scope is not the same that wich you want to acces
$scope.messages
#{{message}}
that S
This issue is with the Binding; Make sure messages is in the $scope.
Check: <input type="text" ng-model="test">
In the controller:
$scope.test = data.message(any string);
If it works then there is definitely a binding issue.
I know is kind of an old question and I am pretty new to all this stuff (laravel, angular, etc) but I think what you were looking for was this:
In order to get the angular scope working here
<li ng-repeat="message in messages">
#{{ message.body }}
</li>
and since the "{{" "}}" is used by laravel, you have to define another way to get the scope, by using $interpolateProvider, like this
var app = angular.module('app', []);
app.config(config);
config.$inject = ['$interpolateProvider'];
function config($interpolateProvider){
$interpolateProvider.startSymbol('<<');
$interpolateProvider.endSymbol('>>');
}
so, then, you change the #{{
<li ng-repeat="message in messages">
<< message.body >>
</li>
Hope it helps someone
I have the following plnkr (although it doesn't display the data):
http://plnkr.co/edit/7jAzOftz9Yq6hXNts9kf?p=preview
I have 2 div sections:
<div ng-controller="AddChoreController as chores">
<div class="row clearfix" ng-controller="AddChoreController as chores">
What I'm trying to do is to build an array in 1 section and then reuse the array in a different section. I get that I'm just instantiating the same controller, my question is how when I update the choreList.chores array can I show it in the second div section?
You should use a service to share across your app / controllers. I included a snippet below to demonstrate how you might do this.
var app = angular.module('app', []);
app.controller('myController1', function($scope, myService) {
$scope.myService = myService;
});
app.controller('myController2', function($scope, myService) {
$scope.myService = myService;
});
app.service('myService', function() {
this.arr = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller='myController1'>
myController1 #1
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div ng-controller='myController1'>
myController1 #2
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div ng-controller='myController2'>
myController2
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div>
I am doing a simple example but for some reason I am unable to print the value in message variable that I pass through $scope in my controller.
please find my code as give in this fiddle: http://jsfiddle.net/yy3vuzfk/1/
html page code:
<div ng-app>
<div>Hello AJS</div>
<div> Sum of 2 and 3 is: {{ 2 + 3}}
<div ng-controller="myController">
Message: {{ message }}
</div>
</div>
script.js code
var myController = function($scope){
$scope.message = "My Message";
};
My output html
Hello AJS
Sum of 2 and 3 is: 5
Message: {{ message }}
any help is appreciated
You first need to initalize angular by creating a module and then creating a controller in that module.
You can see this updated fiddle.
angular.module('myApp', [])
.controller("MyController", function($scope) {
$scope.message = "My Message Is Super Awesome";
});
You can find basic examples # Angularjs.org home page. Look at the "Add Some Control" section on that page.