The best way to explain what I'm trying to do is to just show you an example. Here is the code I have:
<div ng-click="doSomething('path/to/script/with/{{parameter}}')">Click Here</div>
<div>Parameter is {{parameter}}</div> // I can see parameter here
The problem is that {{parameter}} is not binding to the ng-click. I can manually enter the parameter (e.g., '12') and the ng-click works fine, but I don't want to set it manually.
I have tried the following, but none of them work:
<div ng-click="doSomething('path/to/script/with/parameter')">Click Here</div>
<div ng-click="doSomething('path/to/script/with/'parameter)">Click Here</div>
Any ideas?
try
<div ng-click="doSomething('path/to/script/with/' + {{parameter}})">Click Here</div>
or
<div ng-click="doSomething('path/to/script/with/' + parameter)">Click Here</div>
or just read them from scope in your function.
Related
I have this code bellow and is working well, I would like to know how can make this variable show in my root-scope?
the problem is I am using now different controllers and directives
so:
if I put this in directive1:
Show
<button ng-click="showme=false">Hide</button>
and this in directive2 does not work:
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
full code working if in the same directive html + angular
<div ng-app="">
<h1>Ng-show & ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
I heard about I can use something like: $rootScope but how I can implement this in that case? thank you.
You need to make sure show is set on the $rootScope. Convenient place for this is run block:
.run(['$rootScope', function($rootScope) {
$rootScope.show = false
}])
After that all scopes will inherit show from its parent.
Another option. You can actually directly refer to $rootScope from any of your template, this is probably simplest solution:
Show
<button ng-click="$root.show = false">Hide</button>
I have a directive template with the following code
<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}"> </div>
<div class="clearfix"></div>
<div>Standard colors</div>
<div class="color_squares">
<div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
<div class="color_swatch" style="background-color: {{ color }};"></div>
</div>
</div>
<div class="clearfix"></div>
In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color.
But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.
{{color.trim() == ngModel.trim()}}
I have debugged the code and the values are exactly the same.
What I am missing?
This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
To resume this article : never use raw fields use always a dot. So in your scope change
$scope.ngModel
By
$scope.data.ngModel
And in your html change ngModel by data.ngModel.
When using dot you may have some undefined error, this is because you have to initialize the object :
$scope.data={};
Of course you can jsut rename your variable, but you may still have a problem with others directives.
I solved this by removing curly braces around color and using ng-style
<div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" > </div>
I was wondering if there were no compatibility issues when ng-switch-when and ng-class are using on the same element like in this sample.
I'm trying to dynamically change the class of this four elements but for some reasons this isn't working on all of them, just on the one who's currently displayed.
Does anyone know what's going on here?
<div>
<div ng-switch="sw" ng-init="sw=1">
<div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
</div>
<div>
<button ng-click="goTo(1)">1</button>
<button ng-click="goTo(2)">2</button>
<button ng-click="goTo(3)">3</button>
<button ng-click="goTo(4)">4</button>
</div>
</div>
Switch between divs.
$scope.goTo = function(x) {
$scope.sw = x;
}
Return one class or the other one.
$scope.oneClassOrAnother= function() {
if (...) return "class1";
else return "class2";
}
Many thanks.
It doesn't look like you're using the ng-class syntax correctly. Try something like this:
<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>
Where oneClassOrAnother() returns either true or false and "class1" is the name of the class.
Here's a working example of using ng-class and ng-switch-when together: http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview
Angular ngClass docs: https://docs.angularjs.org/api/ng/directive/ngClass
I think its all fine with your code, look at this plunk, I reproduced it and its working. Compare this to your code, maybe you have forgotten about controller?
http://plnkr.co/edit/Lz7L3S?p=preview
Only difference i guess is the fact, that I initiated sw from controller, not from view.
<div ng-switch on="sw">
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
I think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...