I have a few partial templates where the location is changed based on user actions via ng-click:
<div ng-include="contentUrl"></div>
<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>
This works great unless I the button above is inside of the partial itself, so if testScriptForm.html has a button:
<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>
Then nothing happens.
This seems due to ng-include getting a new (inherited but not shared?) scope.
What I can't figure is how to get the included template (partial) to change its own location.
I did try a function to change the $scope.$parent.contentUrl, it does seem to change but not "propagate" the changes.
In coffeescript:
$scope.changeParentLocation = (location) ->
$scope.$parent.contentUrl = location
Also tried to $scope.$apply() and $scope.$parent.$apply() in there and get the error:
Error: [$rootScope:inprog]
http://errors.angularjs.org/1.2.0rc1/$rootScope/inprog?p0=%24apply
Maybe I'm just mis-using includes...
Escape the isolated scope with "dotted model" reference:
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="script.js"></script>
<script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html">
<h1>This is testScriptForm.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button>
</script>
<script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html">
<h1>This is testScriptCase.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button>
</script>
</head>
<body>
<div ng-controller="Ctrl">
<fieldset>
<div ng-include="tpl.contentUrl"></div>
</fieldset>
</div>
</body>
</html>
function Ctrl($scope) {
$scope.tpl = {};
$scope.tpl.contentUrl = '/partials/testScriptForm.html';
}
Related
I am starting to learn AngularJS and wanted to try building a simple calculator app, however, whenever I name the ng-app in my html-file, AngularJS stops working.
I tried building a controller, but seem to be doing something wrong when calling it or putting it to use.
I tried putting the files in the XAMPP webfolder because I thought it might not load from my hard drive, but to no avail.
(please disregard all the half-finished rest, right now I just want to get the controller working)
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="first" autofocus>
<input type="number" ng-model="second">
<br>
<button onClick="defineOperator('+')">+</button>
<button onClick="defineOperator('-')">-</button>
<button onClick="test()">TEST</button>
<br>
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
<script src="http://localhost/calculator/scripts/app.js" type="text/javascript"></script>
</body>
</html>
And the js:
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.defineOperator = function(choice) {
switch (operator) {
case +:
return first + second;
break;
default:
}
};
$scope.testOperator = function(click) {
alert("You chose " + operator);
};
});
Any help would be greatly appreciated.
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.first="hello";
});
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
Have a look at this. One thing you have not closed the tag in which angular is defined.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
You forgot to put > in above line.
Replace it with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
You forgot to end the script tag with >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
if you want to change the app-name in html page you should also change the app name in the js file :
angular.module('calculatorApp', [])
I have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
My html file look like this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src ="ang_script.js"> </script>
</head>
<body>
<div ng-app id="bootangular" ng-controller="firstcontroller">
<button ng-click="alertfunction()"> click me </button>
</div>
</body>
</html>
and the script file is as follows
var app = angular.module("firstModule",[])
app.controller("firstcontroller",['$scope',function($scope)
{
$scope.alertfunction=function()
{
alert("Done");
};
}])
This is throwing an error which takes me to this page https://docs.angularjs.org/error/ng/areq?p0=firstcontroller&p1=not%20a%20function,%20got%20undefined
which I am not able to understand
You're not defining the ng-app correctly. Please update your HTML with below code
<div data-ng-app="firstModule" id="bootangular" data-ng-controller="firstcontroller">
</div>
And your controller code then work. I don't see any error in your controller's code.
I need to alert the path name by clicking the link tag but it's not working for me. Since I am new to angular I am confused about where I went wrong. Can somebody help me with this?
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0-alpha.20" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<script>
var myApp = angular.module('myApp',[]);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
}
}
</script>
</body>
</html>
And here is my plnkr:http://plnkr.co/edit/Cir7Ardx3OVvwPWYJNNv?p=preview
I cleaned up your Plunkr demo and forked it here:
http://plnkr.co/edit/YuinLcjb6OU7VsdSMca9?p=preview
First, I wasn't sure if you intended to target the unstable 2.0 version or not, so I changed it to target the latest stable release of AngularJS (1.3.15). Next, I moved your script to the script.js file and formatted your controller properly.
Now the HTML looks like:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<hr />
{{ name }}
</body>
</html>
and your script looks like this:
angular.module('myApp', [])
.controller("ProductCtrl", ProductCtrl);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
};
}
This is half the battle: making sure that your framework is working correctly. Now, how to show the full path of the selected file? Here are a few links to help you with that (or not, actually):
How to get the full path of the file from a file input
Get file path through type=file
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
but ng-click doesn't work. Why?
Here is my code:
scripts.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function ($scope) {
$scope.mylist = 1;
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<input type="number" ng-model="mylist" />{{mylist}}
<br/>
<div ng-switch on="mylist">
<div ng-switch-when=1>
<ng-include src="'first.html'"></ng-include>
</div>
<div ng-switch-when=2>
<ng-include src="'second.html'"></ng-include>
</div>
</div>
</body>
</html>
first.html
<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>
second.html
<p>second</p>
<button ng-click="mylist=1">switch to 1</button>
Also here is the Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview