Compile inside a controller - angularjs

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

Angularjs get external page data from parameters

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.

Pass a variable from controller to html in angularjs

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>

Angular Update Doom from Controller without using $Scope

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

Pass multiple values in $scope object in Angular.js

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?

Trigger angular from outside of angular-app

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';
})

Resources