I'm trying to add ng-click into Kedo UI template, but function saveCustomView on theUser controller still cannot be fired.
But outside of the tag is ng-click working correctly.
<div id="grid" data-ng-controller="UsersCtrl" data-ng-init="initGrid()" >
<script type="text/x-kendo-template" id="testBtn" >
<div class="toolbar">
<a data-ng-controller="UsersCtrl"
ng-click="saveCustomView()">
Add actual selection to custom views
</a>
</div>
</script>
Could somebody tell me how can I solve it?
Thanks for any help.
Related
I am beginning with AngularJS, and I am wondering why there is a conflict between Bootstrap and Angularjs when I try to simply open a box like this:
Link:
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#open-baggage-box" aria-expanded="false" aria-controls="open-baggage-box">Add Now</a>
Box:
<div id="open-baggage-box" class="collapse add-price-section">
<div class="open-holder">
<div class="container">
</div>
</div>
</div>
It actually does not work and I don't really know why. Thank you
As angular templates are usually dynamically loaded, bootstrap can look for collapse element before it is rendered.
If you want to use Bootstrap UI elements with AngularJS, I recommend UI Bootstrap which implements them as Angular directives.
In your case, collapse directive will do the job :)
Is it possible to conditionally include an ng-click into the dom? Both my desktop view and mobile view share the same template, but I only need the ng-click in the desktop view.
For example, in my desktop view I want something like this:
<div class="maincontent" ng-click="clickEvent()">
<div>Content</div>
</div>
... and in my mobile view I want something like this:
<div class="maincontent">
<div>Content</div>
</div>
You could have some variable in scope which will tell you its mobile view or not by checking user agent and set a flag on basis of that isMobileView, and then you can use same template with ng-click for both mobile and desktop view.
Markup
<div class="maincontent" ng-click="isMobileView && clickEvent()">
<div>Content</div>
</div>
I am trying to control the data-toggle = 'collapse' with Angular JS
I have something like
<a href="#" ng-click="clickMe()"
<div id="wrapper"
data-toggle="collapse"
data-target="#test">
texts and elements...
</div>
<div id='test'>
test div….
</div>
JS
$scope.clickMe = function() {
//I want to collapse the test div in angularjs when I click the <a> tag.
//I can archive that by using the codes below but I want to use the angular
//way to do this
$('#test').collapse('hide')
}
How do I do it in Angular way? Thanks!
You could use ng-show to do this and have ng-click toggle a scope variable.
<div ng-click="test1Showing=!test1Showing">
texts and elements...
</div>
<div ng-show='test1Showing'>
test div….
</div>
Or if you want to remove the element, not just display:none; you can use ng-if instead of ng-show.
I'm creating some tabs in my HTML page for which Im using AngularStrap library. I want to disable one of the tab in it.
My code :
<div bs-tabs>
<div data-title="General"> <!-- the tab which needs to be disabled -->
</div>
</div>
I tried using ng-show, ng-disabled and ng-if -- But it doesn't get disabled.
Any help would be appreciated.
This is something that has been fixed in 2.1.3.
After upgrading, 'ng-if' should be enough:
<div ng-model="tabs.activeTab" bs-tabs="">
<div ng-repeat="tab in tabs" title="{{ tab.title }}" bs-pane="" ng-if="tab.show">
<div ng-include="tab.page"></div>
</div>
</div>
There is now a disabled option for bs-pane (version 2.2.0 onwards)
I am new to Angularjs and need to do some stuff using angularjs. So my question is just to add some separate html pages to one page by using angular controller. Though I do not know how to do this and search it as well help would be appreciated.
I have a html page like this.
<html>
<body>
<div id="div1" >
</div>
<div id="div2" >
</div>
<div id="div3" >
</div>
</body>
</html>
And again I have 3 separate html pages ie. html1 , html2 , html3 likewise. So now I need to put my 3 html pages in to above html page dynamically by using angularjs. Help would bbe really appreciated.
Maybe use ng-include.
<html>
<body ngApp>
<div ng-include="firstPage.html"/>
<div ng-include="secondPage.html"/>
<div ng-include="thirdPage.html"/>
</body>
</html>
If you want to include and apply scope dynamically, you need $templateCache and $compile.