index.html
<div class="center" ng-controller="DescriptionController">
<p>{{perigrafi}}</p></div>
app.js
app.controller('DescriptionController', function($scope, dataPassingService) {
$scope.description = dataPassingService.get();
var perigrafi = $scope.description.Description_en;
var onoma = $scope.description.Name_en;
alert("the description is " + perigrafi);
});
The datapassing service is function that passing data between controllers.The alert work perfect but when I try to show the perigrafi in html file is not work any suggestions? Thanks in advance.
perigrafi must be in $scope in your case like $scope.perigrafi
app.controller('DescriptionController', function($scope, dataPassingService){
$scope.description = dataPassingService.get();
$scope.perigrafi = $scope.description.Description_en;
var onoma = $scope.description.Name_en;
alert("the description is " + perigrafi);
});
Angular.js two way binding for variables work only for those variables which are defined over scope. Since you have defined perigrafi as a local variable, therefore it is not getting binded into html as you are expecting. Put your variable perigrafi on $scope as $scope.perigrafi as suggested by #rkalita.
app.controller('DescriptionController', function($scope, dataPassingService) {
$scope.description = dataPassingService.get();
$scope.perigrafi = $scope.description.Description_en;
var onoma = $scope.description.Name_en;
alert("the description is " + $scope.perigrafi);
});
Well you can directly use $scope.description object in your html without creating new unnecessary variable
$scope.description.Description_en // for var perigrafi
$scope.description.Name_en; // for var onoma
and in HTML you can do like this
<p>{{description.Description_en}}</p>
<p>{{description.Name_en}}</p>
Related
The component file gets data from a csv file and it has a templateUrl to another html file. This html file contains a script tag in which some functionality takes place. I want to access the array from the response.data in the component file in the script tag in the HTML file.
angular.module("keyMetric",[])
.component("keyMetric",{
templateUrl : 'keymetric/keymetric.template.html',
controller : function control($http) {
$http.get('customers.csv').then(function(response){
var arr = response.data;
var arrsplit = arr.split(',');
});
}
});
I want to access the arrsplit variable in the script tag in the keymetric.template.html file
Use $rootScope.
$http.get('customers.csv').then(function(response){
var arr = response.data;
var arrsplit = arr.split(',');
$rootScope.datareceived = arrsplit;
});
Now in html
access like {{$root.datareceived[0]}} .
To access scope variable in script
angular.element(document.querySelector('[ng-controller="controllername"]')).scope().yourscopevariable
or by using jquery
var whateveryouwant = $('[ng-controller="controllername"]').scope().yourscopevariable;
Here is a generic way to get hold of scope variable outside angular context
function getScope(ctrlName) {
var sel = 'div[ng-controller="' + ctrlName + '"]';
return angular.element(sel).scope();
}
This can be called by passing the controller name
var $scope = getScope('ctrl');
i try to store Data in Cookies in Angular. It doesnt seem to work somehow.
I made this function to store the cookie
Store the cookie
$scope.goLove = function(name,id){
var thebestCity = name;
var bestCityID = id;
alert("Du magst: " + thebestCity + " mit der ID: " + bestCityID);
$cookies.put('favourite', thebestCity);
var favouriteCity = $cookies.get('favourite');
alert(favouriteCity);
}
Since the alert works i would think the data is stored inside the cookie. So i tried to open it with another function:
Access the cookie (not working)
cityApp.controller('cookieReader', function($scope, $cookies){
$scope.tellmeCookie = function($scope, $cookies){
var cookieInfo = $cookies.get('favourite');
alert(cookieInfo);
}
});
Somehow the function keeps breaking.As soon as i put the $cookies.get inside there is no more response! Could you please tell me why? Thank you very much!
Firstly have you include angular-cookies.js
Has the module been included in your app
angular.module('app', ['ngCookies']);
On your example that isnt working it kind of looks like your trying to make your code minify safe
you could change it to something like this
cityApp.controller('cookieReader',
["$scope", "$cookies", function($scope, $cookies){
$scope.tellmeCookie = function(){
var cookieInfo = $cookies.get('favourite');
alert(cookieInfo);
}
}]
);
The problem occurs as follows,
$scope.name = "Maximilian";
var template = "<div><span>{{name}}</span></div>";
var content = $compile(template)($scope);
console.info(content); //shows compiled innerText
$scope.outputContainer = content[0].innerText; // shows uncompiled Content
what am i doing wrong?
One possible solution is to put it into a 0 second $timeout-function.
If there is a better one let me know.
$timeout(function(){
$scope.outputContainer = content[0].innerHTML;
});
http://jsfiddle.net/cLenjedL/1/
I think you are looking for an evaluated content.
your controller could look like this.
function TodoCtrl($scope) {
$scope.name = "Maximilian";
var template = "<div><span>"+$scope.$eval("name")+"</span></div>";
$scope.outputContainer = template;
}
Personally I would create a directive and use the transclude function for the html snippet.
I have updated your js fiddle
I am new in Angular.js and want to know more about it.
I just created a small project And want to pass multiple value with $scope object.
But it's not working properly.
Here what I am doing
function ListCtrl($scope, $http,Project) {
$http.get('/project').success(function(data){
str =data.result;
var result= str.replace('http://','domainname');
$scope.projects=data.rows;
$scope.projects=data.result;
});
}
In data variable I am getting rows and result.
And I am passing something like above with $scope.
Any help will be appreciated.
Try this,
$scope.projects = {};
$scope.projects.rows = data.rows;
$scope.projects.result = data.result;
Your problem is, that the view is not informed about the changes of the $scope.data variable, due to the fact that the value is changed in the async callback of the Promise which is returned by the $http.get() method.
Just wrap your $scope changes in a $scope.$apply method to run the digest loop:
$http.get('/project').success(function(data){
$scope.$apply(function() {
// Do scope changes here
})
}
Additionally you are assigning the value $scope.projects twice, so change this:
$scope.projects = {};
$scope.projects.rows = data.rows;
$scope.projects.results = data.result;
or just:
$scope.projects = data;
These two will overwrite each other.
$scope.projects=data.rows;
$scope.projects=data.result;
What you want to do might be more like this.
$scope.projects = {};
$scope.projects.rows = data.rows;
$scope.projects.result = data.result;
Then in your html if you want to display these, you can use ng-repeat to iterate over them and display each element. Do you have HTML to go with this that you are using?
I am testing with the following AngularJS $location. I don't what's the problem with this. Just want to check if the redirection is working or not:
HTML
<body data-ng-controller="MainCtrl">
Hello {{name}}!
<button ng-click='go()'>Go</button>
</body>
AngularJS code
var app = angular.module('location', []);
app.controller('MainCtrl', function($scope,$routeParams, $location) {
$scope.name = 'World';
$scope.go = function() {
$location.absUrl() = 'http://www.google.com';
}
});
$location won't help you with external URLs, use the $window service instead:
$window.location.href = 'http://www.google.com';
Note that you could use the window object, but it is bad practice since $window is easily mockable whereas window is not.
If you want to change ng-view you'll have to use the '#'
$window.location.href= "#operation";
The line
$location.absUrl() == 'http://www.google.com';
is wrong. First == makes a comparison, and what you are probably trying to do is an assignment, which is with simple = and not double ==.
And because absUrl() getter only. You can use url(), which can be used as a setter or as a getter if you want.
reference : http://docs.angularjs.org/api/ng.$location
It might help you!
AngularJs Code-sample
var app = angular.module('urlApp', []);
app.controller('urlCtrl', function ($scope, $log, $window) {
$scope.ClickMeToRedirect = function () {
var url = "http://" + $window.location.host + "/Account/Login";
$log.log(url);
$window.location.href = url;
};
});
HTML Code-sample
<div ng-app="urlApp">
<div ng-controller="urlCtrl">
Redirect to Click Me!
</div>
</div>
this worked for me inside a directive and works without refreshing the baseurl (just adds the endpoint).Good for Single Page Apps with routing mechanism.
$(location).attr('href', 'http://localhost:10005/#/endpoint')
Try entering the url inside the function
$location.url('http://www.google.com')