In my Angular project, I am using a particular value that in my controller is called something like:
$scope.feature1.items.thisItem
There's a particular <div> in my view that uses thisItem many times and it's quite messy to be referring to it as {{feature1.items.thisItem}} for example:
<div id="{{feature1.items.thisItem}}header>
<h1> You've reached the section about {{feature1.items.thisItem}} </h1>
</div>
Is there any way to rename this variable in the view? I would like to simply call it one. I've tried {{feature1.items.thisItem as one}} but that didn't work. Any other ideas?
Yes! ng-init was designed for this very purpose - aliasing another variable:
<div ng-init="thisItem = feature1.items.thisItem">
<h1> You've reached the section about {{thisItem}} </h1>
</div>
I would advise against using ng-init, it's not designed for this purpose. From Angular's documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
You'll want to create a custom controller for this purpose. Something like the following:
module.controller('RenameController', function($scope) {
$scope.one = null;
$scope.$watch('feature1.items.thisItem', function(value) {
$scope.one = value;
});
});
Yes you can use ng-init on the top of your DOM element
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=feature1.items.thisItem">
{{myVar}}
</div>
</div>
Related
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
ng-show is not working in following code
<button ng-click="itemIndex=0;showHome=true;" class="btn btn-link">Home</button>
<div ng-if="itemIndex==0">
<div ng-show="showHome">{{showHome}}
<h3>Home Section</h3>
<img ng-click="showHomeItems=showHomeItems?false:true;showHome=false;" ng-src="images/home.png"/>
</div>
<div ng-show="showHomeItems">
Home Items{{showHome}}
</div>
</div>
Without ng-if it is working fine but with ng-if its not working.
Read this article.
There are some directives in Angular that create a child scope, like ng-repeat, ng-if.
Inside those scopes, the booleans (such as showHome) are searched only within that new scope, and not in the parent scope.
In order to avoid such bugs, it's considered best practice to place the logic in the controller (or service, just not in the HTML) inside an object, which is not a primitive variable and will be looked up in the scope prototypical chain.
Try declaring a variable like this:
$scope.switch = {showHome : true}
and then use it in the html like this:
<div ng-show = "switch.showHome" >
How can i pas values to a function with ng-init in a angular project?
i have tried this and it works fine:
<div ng-controller="myCtrl" ng-init="myfunction(1)">
but the problem is, when i do this
<div ng-controller="myCtrl" ng-init="myfunction({{id}})">
or
<div ng-controller="myCtrl" ng-init="myfunction(id)">
it doesn't work!!
if i show the value of {{id}} in my template i get the id: 1
so the id does exist.
what is here the problem?
As Brendan Green mentioned, if id is a scope variable you don't need to pass it to the function. Would something like this work?
$scope.myfunction = function(){
// do whatever with $scope.id
}
If you really need to use it as you are your third example should work. Here is a plunker.
Created a fiddle here: http://jsfiddle.net/frishi/HB7LU/22553/
Basically, pass in the variable itself to the function and not the interpolated value, i.e. {{boo}}
<div ng-controller="MyCtrl" ng-init="boo=2">
<div ng-click="foo(boo)">Click Me</div>
</div>
In order to use myfunction in ng-init, the function should be defined in your $scopebecause ng-init evaluate expressions whatever they may be.
So here is what you should do:
HTML:
<body ng-controller="MainCtrl" ng-init='myfunction("john");'>
<p>Hello {{name}}!</p>
</body>
JS:
app.controller('MainCtrl', function($scope) {
$scope.name = 'Mike';
$scope.myfunction = function(otherName){
$scope.name = otherName;
};
});
Example
Keep in mind that it is not recommended to use ng-init this way:
The only appropriate use of ngInit is for aliasing special properties
of ngRepeat, as seen in the demo below. Besides this case, you should
use controllers rather than ngInit to initialize values on a scope.
In Angularjs template is it possible to use ViewBag.Property in ng-show?
I set some viewbag in my controller/action like this
ViewBag.AllowExport = false;
when i tried following nothing happen
<div ng-show="#ViewBag.AllowExport">
Export
</div>
Above Div is still showing even if AllowExport = false;
Is my syntax is wrong here or we can not use Viewbag in ng-show?
Any advice
Try this:
<div ng-show="'#(ViewBag.AllowExport)'">
Export
</div>
You're mixing fron-tend (Angular/JavaScript) and back-end (Razor) code here. I would strongly advice against that. However if you really want to do that: the result in HTML will be which will just be a string to Angular.
This should work instead since Angular will validate the expression in {{}}:
<div ng-show="{{#ViewBag.AllowExport}}">
Export
</div>
Instead of mixing in Razor syntax in your Angular HTML code I would recommend using a scope variable being set from either some JSON source, or if you really want to mix in MVC data, setting the value in some Javascript configuration:
<script>
window.ClientConfig = {
allowExport: #ViewBag.AllowExport,
};
</script>
Then in your Angular controller simply use $scope.allowExport = window.ClientConfig.allowExport;
And in HTML:
<div ng-show="allowExport">
Export
</div>
I have the next template:
<div ng-repeat="friend in friends | filter:filterFriendsHandler">
{{friend.name}}
</div>
and in my controller i have:
$scope.filterFriendsHandler = function(friend){
//HERE I WANT TO ACCESS TO FRIEND DOM ELEMENT; to do something like this:
//$(friendElement).text('foo');
}
Thanks
I'm going to answer the specific question here, yes I understand this isn't the "angular" way of doing things. If you want to do things the "correct" way, then don't do this, use a directive. There, disclaimers aside, here's how to do it:
Basically, what you want to do is give the DOM element an ID based on the $index or a unique value in your ng-repeat object. Here, I'll just use $index.
<div ng-repeat="friend in friends" id="friend_{{$index}}" ng-bind-html="doSomethingBadToTheDom('friend_' + $index)">
{{friend.title}}
</div>
Then, inside your controller, just query the DOM for the element with that ID:
$scope.doSomethingBadToTheDom = function(ele_id) {
var element = document.getElementById(ele_id);
element.innerHTML = "I'm abusing angular";
}
We're using ng-bind-html here because the DOM element will exist when your controller function executes, in the case of something like ng-init, it won't.
Again, this goes against everything angular stands for, so if you're trying to follow angular best practices, don't do this.
I've run into situations where the technique is useful though, especially when dealing with non-angular libraries, or those times when the "angular way" is more trouble than it's worth.
You need to use a directive for that
<div ng-app="test-app" ng-controller="MyController">
<div ng-repeat="friend in friends" nop>
{{friend.title}}
</div>
</div>
JS
app.directive('nop', function(){
return {
link: function(scope, elm){
console.log('eee', elm, arguments);
elm.css('color', 'red');
}
}
});
demo: Fiddle