Dynamically updating an ng-include - javascript

This should be easy for any one who knows Angular--I, on the other hand, am super new to it. I was trying to put together an easy example using ng-include but it's not clear why the variable inside the include is not updating.
I include some html in the page (not sure if ng-model is necessary):
<div ng-model="template" ng-include="template.url"></div>
I have a button:
<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">Change!</a>
that calls a function from the controller which looks like this:
app.controller('MainCtrl', function ($scope) {
$scope.templates =
[ { name: 'Template1', url: 'views/template1.html'},
{ name: 'Template2', url: 'views/template2.html'} ];
$scope.template = $scope.templates[0];
$scope.switch = function() {
$scope.template = $scope.templates[1];
console.log($scope.template);
return $scope.template;
};
}
);
The variable that shows up in the console? Correct. But nothing changes on the page.
UPDATE: So this code works. What's required is the removal of the href attribute, which in some cases was reloading the page. If that's true, then is there a way to do this in which there is a failsafe? i.e. the href works fine without javascript, but the ng-include works when javascript is working?

It looks okay, try it in this plunkr. The only thing I changed was the URL to the templates.
Here is a fiddle also showing that it works with and without ng-href.
<a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">Change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">Change!</a>
After seeing Sunil's comment, I added in bootstrap css to make it clear that href is not needed to get the desired styling. It can be removed without any problems. But, unfortunately, plnkr and jsfiddle are not reproducing the reload you experienced.

Related

AngularJS ng-click not firing from anchor click

I have an AngularJS link that is not firing, so that when the item is clicked, nothing happens. The click event only has one line of code, that works in other parts of the website:
// Load Add Job Template
dashboard.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
And the click element is a simple link:
<a ng-click="loadAddJob()">
<i class="fa fa-plus-square-o"></i><br />
Add <br />Job
</a>
Everything else works on the page so I know the controller and app are both declared correctly. Is there something I'm missing?
your function should be,
$scope.loadAddJob = function() {
dashboard.global.template = "templates/AddJob.html";
}
if you are using Controller as syntax, the HTML should be changed to,
<a ng-click="dashboard.loadAddJob()">

Ionic not changing views/state unless it is a tab

I have a tab bar system in my Ionic app. However I wanted to have some views that weren't apart of the tab bar and were just a sepertate page to be opened by a button.. For some reason whenever the page isn't a tab it will not open the view. I can see the URL change but it will not change to that view unless the view is also a tab as well. Hopefully that makes sense. I initially was trying to switch pages using Href, but then decided to try ng-click when href wasn't working.. here is my code below..
Where I have the state defined:
.state('tab.friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
Here is the button I had that would call the function:
<button class="button button-clear button-assertive" ng- click="changeview()">New Group</button>
and then here is my changeview() function, which I know is called correctly because the statement is printed:
$scope.changeview = function() {
console.log("hey why isnt this working");
$state.go("tab.friendsadd"); //change state
}
Not sure if this could be the issue but here is my template for the new view that I am trying to open as well:
<script id="templates/friends-add.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<p> Header </p>
<p> Tom brady </p>
</ion-content>
</ion-view>
</script>
Thanks for any help. I hope this is an easy fix...
try
.state('friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
and this in the html
<button class="button button-clear button-assertive" href="#/friendsadd" ui-sref="friendsadd">New Group</button>
and if your template is an actual file, then you don't need the <script></script> tags
If this won't solve it or even if it will, add some debugging to your routes
https://stackoverflow.com/a/28750792/4050230
Hope this helps..

Problems with event binding on dynamically created elements

I have code that is behaving one way on jsfiddle, one way on localhost, and another when uploaded to my website. I've been wrestling with the problem for a few days now. I don't know what tests or trial and errors I can run at this point.
This jsfiddle is working exactly as I want it to work.
http://jsfiddle.net/2ZLse/10/
When I insert this code into my project, and run it on localhost with WAMP, the javascript for the page does not work. The javascript is valid when run through jslint.
Stranger still, when I upload the exactly same files to my website, the javascript is functional, and I can even click on the watch button and render the form, but the nevermind button does not return me to the original state. I'm not receiving any errors on my cPanel.
When I replace
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
with
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
The localhost will function the same as the website functions, with functioning javascript, but without a functioning nevermind button.
Below is the code, but let me tell you more about the rest of the page incase it's relevant. I'm using php. It's a .php file, bootstrap is loaded and working, jquery is loaded, and the javascript is run at the bottom of the page, not the header. There is ajax running elsewhere on the page, which works on the website but not the localhost, and I have the correct connect.php file for each. My best guess is that ajax has something to do with it.
What is the problem, or what tests can I run?
Here is the HTML
<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>
<!-- images and continued input extension-->
<!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>
Here is the javascript.
var imagebox = 'ORIGINAL STATE';
var watchform = '<form action="post/watchpost.php" method="post">' +
'<input type="text" name="watchid" /><br>' +
'<input type="submit" class="btn btn-default" value="Contribute" />' +
'</form>' +
'<br><br><button type="button" class="btn btn-default nevermind">nevermind</button>';
$(document).ready(function(){
//control functionality
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
});
});
Event binding on dynamically created elements?
This question, while helpful, did not solve my issue. I believe my issue is separate from that one.
The following only binds event handler to the EXISTING DOM element:
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
which does not include what you append after clicking on #watchcontrol.
The following would work though, binding the event everytime when you create the dynamic element (even though I suggest that you free the element before removing it from the DOM):
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
});
http://jsfiddle.net/2ZLse/11/

calling ng-click function from an external script

i am working on a chrome extension that can automate a form filling. So the form which i am filling has a next button attached to it that has a ng-click attribute "forward()" like this-
<button type="button" ng-class="{disabled: !showNext()}" ng-click="forward()" class="btn btn-success btn-lg default pull-right" style="font-size: 18px;">Next <i class="fa fa-chevron-right white-color"></i></button>
I tried calling angular.element($('button.pull-right')).scope().forward() or $('button.pull-right').scope().forward() and the function executes but the view doesnt get updated. I know i can do $('button.pull-right'.click() and that works but actually i am in need of bypassing the click event, for that i need to bind the click to my external script funciton(which i will inject into page through my extension) and then from my script call the forward() function.
I had a lot of time googling this but none worked out for me. Please Help!
When you're reaching into Angular from outside of its context it will not notice that you've done so unless you tell it about it. You do that by using $apply.
Try this:
angular.element($('button.pull-right')).scope().$apply(function() {
angular.element($('button.pull-right')).scope().forward();
});

How to perform a check on ng-disabled in angularjs?

I am using a fuelUX Wizard and Angularjs. I would like the next button to be enabled or disabled basing on this controller method:
$scope.canMoveForward = function(){
switch($("#moduleWizard").wizard("selectedItem").step){
case 1:
//check if the module on the first step is valid*/
return $scope.validSelection && $scope.linkedPredicateForm.$valid;
case 2:
//check if the table is empty
return !linkingDataSource.isEmpty();
case 3:
var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) ||
($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
}
};
So indeed this is how I decleared the buttons:
<div class="actions">
<button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish" id="wizard-next" ng-disabled="!canMoveForward()"
ng-click="handleStepResult()">
Next<i class="icon-arrow-right"></i></button>
</div>
And it works fine, except when I get back from the second page to the first page: if the next button is disabled in the second page it will be this way even on the first page, unless I don't edit the form there. Is there anyway to refresh the ng-disabled binding?
I guess AngularJS cannot check if the output of canMoveForward() has changed or not. I found that for this kind of things it's easier to rely on scope variables. You could do something like this:
ng-disabled="!canMoveForward"
Then in your controller just set the property to true/false as needed:
$scope.canMoveForward = false;
I have had the same problem and I've discovered that the problem is with the ! operator.
This fails:
ng-disabled="!canMoveForward()"
But this will work:
ng-disabled="canNotMoveForward()"

Categories