I made a jsfiddle here to make angular question: https://jsfiddle.net/b6xgjfwg/
<div ng-controller="AppCtrl">
Hello {{name}}
</div>
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.name = 'Sally';
}
same as http://jsfiddle.net/thomporter/tcVhN/
But not working.
I am new to jsfiddle and help me.
Please see below screen show. You can see that I specified to load my angular in the head (no-wrap) and also reformatted my code to be more "correct"
try this instead
var app = angular.module('app',[]);
app.controller('AppCtrl', function AppCtrl($scope) {
$scope.name = 'Sally';
});
Related
I'm trying to develop a solution through AngularJS where when the user changes the profile image, all other photos based on their profile are also changed.
How can I start developing this feature?
Thanks in advance!
[Solution]
With the help of the #wolfman6377, I can understand the functionality and develop the solution for what I need. I'll leave an example in CodePen.
CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function() {
this.myVar = 'https://robohash.org/asd'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
Thank you, #wolfman6377.
You are using a jQuery-like strategy. jQuery element selector will not be able to change the value of myVar.
I would recommend going through some basic tutorials on angular1. But in a nutshell, you need to:
Do not grab elements and change attributes
add a module to the ng-app value
Use ng-controller in the template
Add ng-click to the button to update the value of myVar
template
<body ng-app="myApp">
<div id="var" ng-controller="myController as vm">
<img ng-src={{vm.myVar}} />
<button ng-click="vm.updatePicture()">Click me</button>
</div>
</body>
controller:
angular
.module('myApp', [])
.controller('myController', function() {
this.myVar = 'https://www.w3schools.com/angular/pic_angular.jpg'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
I'm trying to understand why I must use the as in order that the two-way binding will work with this inside a controller.
working example:
<div ng-controller="MyController as TestController">
{{TestController.test()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function(){
this.test = function test(){
return "test";
};
});
</script>
not working example:
<div ng-controller="MyController">
{{MyController.test()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function(){
this.test = function test(){
return "test";
};
});
</script>
If you want to use this in your controllers you need to use the controller as syntax otherwise you have to use $scope in your controllers. If you didn't use controller as the controller would need to be:
app.controller('MyController', function($scope){
$scope.test = function test(){
return "test";
};
});
and the view would need to be:
<div ng-controller="MyController">
{{test()}}
</div>
One of the benefits of the controller as syntax is it helps to promote the use "dotted" object in the View which helps to avoid any reference issues that may occur without "dotting". For more info on scope reference issues take a look at this post
Not really an answer to your question, but normally you'd define functions you want to invoke from the DOM on the Controller's $scope.
Example:
<div ng-controller="MyController">
{{test()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope){
$scope.test = function test(){
return "test";
};
});
</script>
http://plnkr.co/edit/lbgG9MCJ1kNBhArLpEpc?p=preview
Edit: Sorry, forgot to update the code in my post. The plnkr should've been right all along though.
Thanks to Wayne Ellery:
It's because Angular added the controller as syntax in 1.2 which enables you to work with this. ng-controller="MyController as myController". Think of it as var myController = new MyController();. It's essentially scoping an instance of MyController to myController.
I have a template like this.
<body ng-app="demo" ng-controller="demo">
<div ng-include="/main.html">
</div>
</body>
And the main.html is.
<div ng-app="main" ng-controller="main>
""
</div>
here is the js.
JS-1
var myapp = angular.module('demo', []);
myapp.controller('demo', function($scope,$routeParams, $route,$http) {
$scope.variable="444"
})
JS-2
var mainapp = angular.module('mainapp', []);
myapp.controller('main', function($scope,$routeParams, $route,$http) {
})
Is it possible to access the scope of JS-1 inside JS-2?, if yes how, if no is there any solution to this.Thanks.
It depend what you want to do.
If you want read $scope.variable variable from JS-1, you should see it in JS-2 $scope.
If you want modify $scope.variable form JS-1, you should create method in JS-1:
$scope.changes = function(data){
$scope.variable = data;
}
This method also should be available in JS-2 $scope.
This isn't nice solution but should work.
The best solution is to create service which will provide operations on JS-1 fields.
When I run $getIndex() on my projects node I get an empty array. Why? and am I using it incorrectly?
Here's a fiddle http://jsfiddle.net/G55jS/1/
js
angular.module('todo', ['firebase']);
angular.module('todo').controller('TodoCtrl', function($scope, $firebase) {
var projectsUrl = "https://ionic-guide-harry.firebaseio.com/projects/";
var projectRef = new Firebase(projectsUrl);
$scope.projects = $firebase(projectRef);
$scope.projects.$on('loaded', function() {
$scope.keys = $scope.projects.$getIndex();
});
});
html
<div ng-app="todo" ng-controller="TodoCtrl">
<div ng-view>
{{keys}}
</div>
</div>
Screen cap of my data layout
Seems like it's a known bug and has been fixed. Will be fixed in the upcoming release https://github.com/firebase/angularFire/issues/262
Update: the fix was merged into the 0.7.1 release
I don't know what's wrong here. An explanation would be lovely. Thanks!
http://jsfiddle.net/natecraft/xKtwP/13/
<body data-ng-app="channelApp">
<div data-ng-controller="channelController">
Hello! {{ name }}
</div>
</body>
var mod = angular.module("channelApp", []);
mod.controller = ("channelController", function($scope) {
$scope.name = "nate";
});
There are two separate issues causing this unexpected behavior. First, the syntax for the controller should be like this:
var mod = angular.module("channelApp", []);
mod.controller("channelController", function($scope) {
$scope.name = "nate";
});
Second, the fiddle is setup incorrectly and still won't render properly after making the above fix. I have fixed the fiddle configuration in this forked version of your fiddle.
I also created the code example in CodePen for further reference.