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
Related
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>
I am new to Angular JS (1) and I am having issues with ng-repeat. I am using socket.io with Angular. Here is my controller:
var messagingApp = angular.module('messagingApp', []);
function mainController($scope) {
var socket = io.connect();
socket.on('message', function(data){
$scope.users.push({'Name': 'yeh'});
console.log($scope.users);
});
$scope.users = []; //if I put stuff here and comment out socket stuff, it shows in the front-end
};
messagingApp.controller('mainController',mainController);
I can see that it is going inside that on block (via console.log). However, it is not displaying anything to the front-end. My front-end is as follows:
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user.Name }}</p>
</div>
My understanding is that if you change the model (users in this case), it should automatically update the ng-repeat. Any help would be appreciated.
Add $scope.$apply() after pushing to the array. Because you are updating the model outside of the angular scope. So the angularjs doesnot know the model has been updated. More about $scope.$apply http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
you are pushing the object in array and try to iterate Array. So you should specify the position.
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user[$index].Name }}</p>
</div>
or try this..
socket.on('message', function(data){
$scope.users.data.push({'Name': 'yeh'});
console.log($scope.users.data);
});
$scope.users = {data:[]};
<div ng-repeat="user in users.data">
<p>{{ user.Name }}</p>
</div>
I have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">
I am new with angular, so i hope this question is not to stupid.
as the title says, i wish to populate a list using angular and a method from a mvc controller. But i cannot figure out how to call the method? i have tried making a http request but i cannot get i to work.
Am i totally lost or is it somthing like this below?
Here are the list.
<div ng-app="cardList" ng-controller="CardController"></div>
<p><input type="text" ng-model="test" /></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{x}}
</li>
</ul>
and here is the script.
<script>
var list = $http({ url: "Controllers/CardController/AllCardsList", method: "GET" });
angular.module('cardList', []).controller('CardController', function ($scope) {
$scope.names = [list];
});
Try this:
<div ng-app="cardList" ng-controller="CardController">
<p>
<input type="text" ng-model="test" />
</p>
<ul>
<li ng-repeat="x in names | filter:test">
{{x}}
</li>
</ul>
</div>
and:
angular.module('cardList', []).controller('CardController', function($scope, $http) {
$http.get("Controllers/CardController/AllCardsList").then(function(response){
$scope.names = response.data;
});
});
How can I store values to variable for example on click in angular? I have the following code which doesn't save the value into variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="variable = 1">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
});
jsfiddle code
Your variable binding {{variable}} should be inside controller's scope. So move ng-controller to an element that will contain variable binding.
You need to initialize the variable. See http://plnkr.co/edit/dmSNVJ3BGIeaWaddKtZe
<body ng-app="">
<button ng-click="count = 1" ng-init="count='not set'">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Use a function to set the variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="setVariable()">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
$scope.setVariable = function() {
$scope.variable = 1;
}
});
Your syntax is correct, what went wrong is you put your controller declaration in the wrong place.
You just need move it to the outer layer, no need for ng-init or function (but might be a better practice):
<div ng-app='app' ng-controller="MyController">
<a href="#" ng-click="variable=1">
click me!
</a>
{{variable}}
</div>
http://jsfiddle.net/ybavzec4/3/