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
Related
I am beginning to use Angularjs. I have this working properly.
There is a dynamically created sidebar listing all the styles.
There is a dynamically created navbar for sizes associated with that style.
When clicked style is "selected" properly.
When clicked size is "selected" properly.
I want these two selections to be parameters in a url that I GET and display within a specific DIV. So the url would look like ...http://xxxddd.com/inventory/{{style}}/{{size}}
I have absolutely no idea where to go from here.
<script>
var app = angular.module("alt", []);
app.controller('StyleController', function(){
this.style = '';
this.selectStyle = function(newValue){
this.style = newValue;
};
this.isSelected = function(styleName){
return this.style === styleName;
};
});
app.controller('SizeController', function(){
this.size = '';
this.selectSize = function(newValue){
this.size = newValue;
};
this.isSelected = function(sizeName){
return this.size === sizeName;
};
});
</script>
I am very new at angular. I hope someone can help me. This is the main hangup with my project right now.
Thanks in advance.
You will want to create a service that utilizes AngularJS' $http library to make a GET request. Look at the documentation and see how to pass parameters (style/size).
You will then want to use AngularJS' Dependency Injection (DI) to inject your service into your controller and call its method which has the $http call.
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>
i really need some help here with angular... this time i have no idea at all.
I want to update my doom, Angular Element using my controller.
For example:
HTML code:
<div ng-controller="UpdateController as UC">
{{UC.updateText}}
<button ng-click="UC.updateIt()"/>
</div>
js code:
angular.controller('UpdateController', function(){
this.updateText = 'Text to Update';
this.updateIt = function(){
// Here i need to update this.updateText.
}
});
I have tried:
angular.controller('UpdateController', function(){
var updateText = this;
updateText.newText = 'Text to Update'
this.updateIt = function(){
updateText.newText = "my new text";
}
});
and i change the HTML as well to {{UC.updateText.newText}}
But it doesn't work, i can see all my changes in console.log();
I have tried multiple ways. using Watch (error, digest already running). and other variables and calls.
Can someone explain me how to do it using 'this.' ?
I don't wan't to use $scope, if i use $scope TAG it updates with no problem, but i don't wan't to give up using the 'this.' tag.
Also, i don't want to use element.angular, or jQuery.
Thanks!
You should be able to just use this.updateText = 'my new text'. It is however recommended to use a variable that is assigned to this as this may change when within a function inside the controller.
angular.controller('UpdateController', function(){
var vm = this;
vm.updateText = 'Text to Update';
vm.updateIt = function(){
vm.updateText = 'my new text';
}
});
Plunkr
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?
Ho to trigger an event inside ngApp from the outside world?
This is my current code:
// Inside old code
console.log("Start Triggering angular");
$('#issueSelectedPid').val(pid);
$('#issueSelectedPid').trigger('input');
console.log("Triggering angular");
// inside ngApp
<input id="issueSelectedPid" ng-model="vm.selectedPid" ng-change="vm.doMyStuffTriggerdFromTheOutsideWorld()" />
Are there better ways of doing this?
Thanks for any help
Larsi
You can access the scope using the below code :
var appElement = document.querySelector('[ng-app=appName]');
var appScope = angular.element(appElement).scope();
var controllerScope = appScope.$$childHead;
controllerScope.functionName(controllerScope.vm.doMyStuffTriggerdFromTheOutsideWorld() in your case)
you need to get your html element by yourDivId which is defining your input scope, then call $apply with something or without
var scope = angular.element($("#yourDivId")).scope();
scope.$apply(function(){
scope.something= 'something';
})