We Keep Coding

$state.go() does not load the view (Url was changed in address field), but the view shows when second click

Use Angular JS ui.router in project.
I have added the following state map in app.js:
.state( 'confirmCart', {
url: "/cart/confirmCart",
controller: "ConfirmCartCtrl",
templateUrl: "/ng-apps/selfEnroll/pages/confirmCart/confirmCart.html"
} )
Added a function in control.js:
$scope.reviewCart = function() {
$state.go("confirmCart");
return;
}
Added a button on home page:
<div>
<button ng-click="reviewCart()">Review Cart Plans</button>
</div>
And then set the view area div use the 'ui-view' attribute.
<div class="container">
<div ui-view></div>
</div>
$state.go() does not load the view when first click this button, but the template Url was changed in browser address field.
However, the view shows when second click.
I notice that when click fist time, the view page loaded under the browser developer tool 'Network' tab. But the view page is not showing in the window.
This view has to be displayed by the second click of the button. I am confused that.
Screenshot of the developer tools shows

Try this:
$state.go("confirmCart", {}, {reload: true});
Or this:
$state.go("confirmCart").then( () => $state.reload() )

How to use one html to render different content?

I have several a link in 'a' HTML. I expect the page to open in a new window when I click each link and these new windows are using the 'b' HTML. I would like to use 'b' HTML renders different content via different URL, such as /get_node or /get_vue etc. But 'b' HTML has only one URL.
If I pass get parameters to that URL like http://localhost:8000/xxxx.html?show=something,how to make AngularJs can receive this parameters?
For instance, here is 'a' HTML code.
<ul class='list-wrapper'>
<li>Javascript</li>
<li>Node.js</li>
<li>Angular</li>
<li>Vue</li>
<li>CSS/SASS</li>
<li>NPM</li>
<li>Gulp</li>
<li class='getback'><i class="fas fa-times"></i></li>
</ul>
Here is 'b' HTML code, http://XXXXXXXXXXXX.html.
URL get by angularjs via $http.get.
var app = angular.module('app',[]);
app.controller('index',($scope,$http)=>{
$http.get('/get_js',then((res)=>{
$scope.js = res.data;
},()=>{
alert('database error');
})
})
Could anyone tell me how can I do that? Can I put several URLs in $http.get to solve it?
Thank you very much!!
PS: I am using an express server to host the content.

AngularJS: Dynamically loading HTML with a controller

I'm new to AngularJS and I'm working on a small project to get the hang of how things work.
Basically I want to have a single-page app where I can dynamically change part of the page to include html from some other file. This other file has a controller and such. I would like the url to stay the same. I need the page to be loaded dynamically with a variable name.
Right now, I can get the HTML to load from the imported template, but a lot of HTML is excluded and all of the "ng" tags are gone. I take this to mean that this new page can't find the controller or a lot of the stuff is getting compiled out or something. Maybe I'm not importing things in the correct order? I have no idea. Here's my basic layout:
app.js
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.htmlContent = 'somepage.html';
$scope.externalPage = 'otherpage';
$scope.changePage = function(page) {
$scope[page]();
}
$scope.otherpage = function() {
$scope.htmlContent = 'otherpage.html';
}
});
app.controller('InternalPage', function($scope) {
alert('hello world');
$scope.content = "This is not showing";
});
index.html
<div ng-controller="Main">
<!-- This all works. Clicking "Change Page" changes the
HTML referenced by the <div> tag -->
<a ng-click="changePage(externalPage)">Change Page</a>
<div ng-bind-html="htmlContent"></div>
</div>
otherpage.html
<div ng-controller="InternalPage">
<p>{{content}}</p>
</div>
I have tried including the javascript in the html file itself to no avail. I also could not get the ng-include thing to work either.

Try looking into ng-include instead of ng-bind-html:
https://www.w3schools.com/angular/angular_includes.asp

Ionic hrefs not opening in Android

I have been working on an app that uses JSON data from a server. In this JSON data there is an object that is made up of HTML, which often has an URL in it. And I also have an object that is 'just' an URL which I load into a button which should open the URL when clicked. The problem is, however, that when I click the URL's in the Ionic View app the URL's will open inside the app itself. But when I click the URL's in the standalone build on Android both these URL's don't work. What I try to accomplish is that both these URL's open in the system browser when clicked. But I can't seem to find out why this doesn't work
I do have the Cordova script in my index.html, and I also have the InAppBrowser plugin installed from Cordova.
This is the button:
<a class="button button-full button-assertive" ng-model="button" ng-click="openUrl({{vacature.url}})"> Sollicitatielink </a>
This is the function in my controllers.js:
$scope.openUrl = function(url) {
window.open(url, '_system', 'location=yes');
};
This is the HTML in the JSON data:
via our website.
I was wondering if you guys could help me with why this doesn't work. Could it be that I did not implement the plugin correctly, and if so, how could I do this properly?
Thanks in advance!

this is how I implemented the plug-in and works for me:
<button class="button button-block button-stable" ng-click="openInBrowser('https://www.google.com')">
GOOGLE
</button>
then in the JS
myApp.controller('NameCtrl', ['$scope', '$ionicPlatform', '$cordovaInAppBrowser', function($scope, $ionicPlatform, $cordovaInAppBrowser){
$scope.openInBrowser = function(extUrl){
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
};
$cordovaInAppBrowser.open(extUrl, '_system', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
}); // $ionicPlatform.ready
};//--------------------------------------
}]);

I figured out why my URL's were not opening when clicking the button. This is the code I now use for it to work properly.
This is the button:
<button class="button button-full button-assertive" ng-click="openUrl('{{vacature.url}}')"> Sollicitatielink </button>
This is the function:
$scope.openUrl = function(extUrl) {
window.open(extUrl, '_system');
};
Edit
The URL's in the JSON HTML data are now working because of this code:
via our website.
Is now changed to this:
via our website.
And now all the hrefs in the Ionic app work!

Embedding a Twitter share button (with JS and everything) into a Mustache template

How can I embed a Twitter (with JS and everything) share button into a Mustache template?
The problem which I have is that my AJAX app does not reload the page, but simply switches views based on Mustache templates. I noticed that functionality provided by widjets.js simply does not get turned on, because the JS files gets loaded only once per application lifetime, and searches for tags decorated with a "twitter" tag on DOM_READY. This however, completely excludes the cases when HTML gets rendered from a template later on.
I know that I can use a raw hyperlink to twitter and customize it to o look like a button, but that is just too primitive.

Here's a solution that worked for me using a template inside my HTML file:
social.js:
$(function() {
var socialFeeds = {
twitter: {
account: "your-twitter-account",
script: function() {
// twitter code goes here, minus the script tags
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// in my case, I had to re-render the twitter button, see here:
// http://stackoverflow.com/a/6536108/805003
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
}
}
}
$.Mustache.addFromDom('social-template');
$('#social').mustache('social-template', socialFeeds);
}
index.html:
<script id="social-template" type="text/html">
<div id='social'>
<p>Twitter button:</p>
Tweet
{{ twitter.script }}
</div>
</script>

You could call the init functions not on document ready but from the views where you want the twitter button to appear.