I have a controller that basically assigns text to a $scope variable like this;
$scope['Model'] = ["markdown text 1", "markdown text 2"];
And then I try to use marked on it within a view, like this;
<div ng-repeat="n in Model">
<div marked="n"></div>
</div>
or
<div marked>
<div ng-repeat="n in Model">
{{n}}
</div>
</div>
I just get {{n}} as the output, verbatim. Marked never runs, never does anything to it. I'm completely baffled. I know the text is fine.
I have tried all of the examples and nothing seems to work. It does work if I put in static, hard-coded text between <marked> directives - but nothing dynamic.
The only way I've been able to make anything work is to forcefully use the marked(n) function within the controller - which is far less than ideal and certainly not what I'm wanting to do.
After a lot of trying, I think that the way angular-ui-router is involved may play a part. Here is the HTML structure;
index.html
<div class="content-body">
<ui-view />
</div>
content.html
<ui-view />
entry.html
<div ng-repeat="m in model">
<div marked="m"></div>
</div>
I think I've got it.
<div ng-repeat="m in model">
<div marked="m"></div>
</div>
Works as per this fiddle: https://jsfiddle.net/jorgthuijls/q244srfh/
See, ng-repeat creates its own scope. So, you can bind the m variable to the marked directive.
I got it to work with angular-ui-router too: https://jsfiddle.net/jorgthuijls/ck8by0ze/
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 very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
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>
There is a panel for each contact. I want to show the remove button on a specific panel only when the user mouse over that same panel.
...
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="{{contact1.id}}=true" ng-mouseleave="{{contact1.id}}=false)">
<div class="panel-heading">
REMOVE BUTTON
</div>
...
I cant get the reason why this code doesnt work.
There is 2 things in your code that can create problem. First of all, ng-show / ng-mouseneter / ng-mouseleave need an expression. So you don't need to put the {{ }}.
But it wasn't the only one problem. The fact is you were using your id to manage the show property of your item. But this expression need a boolean and you can't just erase your id with a boolean like in ng-mouseneter. To do so, you have to use an other attribute in your item, isShow for example. This will keep your id safe and you will be able to manage your view with it.
So, it give something like this :
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="contact1.isShow = true" ng-mouseleave="contact1.isShow = false">
<div class="panel-heading">
REMOVE BUTTON
</div>
....
Would be nice to see a working example, but for the start the angular directives you've used require an expressions, so try removing the {{}} from ng-mouseenter, ng-mouseleave and ng-show.
So, it should be like ng-show="contact1.id".
Try applying this. Hope it works for you.
Remove the brackets from your assignment statements.
The brackets are to render a variable. Since you're assigning, instead of ng-mouseenter="{{contact1.id}}=true" you'll want to do ng-mouseenter="contact1.id=true"
You're previous code was the equivalent of writing something like null=true, or whatever value was already assigned to contact.id. The new code assigns contact.id to the value you specified.
EDIT: You can just use a local variable.
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="showButton=true" ng-mouseleave="showButton=false">
<div class="panel-heading">
REMOVE BUTTON
</div>
</div>
</div>
Hi all you experts out there.
My testing area: http://plnkr.co/edit/ddJT1e4a8L5NTSIVNTk7
I am trying to visualize hierarchical data in a tree-form with Angular, even though i'm using some samples to aid me in my quest (like http://jsfiddle.net/alalonde/NZum5/ and http://jsfiddle.net/brendanowen/uXbn6/8/) i fail.
As soon as i place the recursive element ng-include inside the ng-repeat in side the template it self, the memory usage of its browser-window goes through the roof and effectively hangs the browser. But the available tree-sample i could find are doing just that.
What am i missing?
You need to use the same variable name in the template. The current node is called node in the controller then child in the template.
This cause the template to render the same node over again.
It works fine if you use the same variable name :
<li ng-repeat="node in node.children" ng-include="'node.html'"></li>
See it in action here : http://plnkr.co/edit/mjfdSEDcMK8kGCRjS6V6?p=preview
If anyone here wants to avoid having the extra ng-repeat outside of the template (where it kind of includes stuff from the template anyway), here's a fiddle showing how to do it:
http://jsbin.com/hokupe/1/edit
Also here's a blog post and a 10-15 minutes video on how it works:
http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/
Sample Code:
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>