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
Related
I am working on uib-popover recently, I found a problem that I am confused with.
I want to popover a template, in this template I have an input, at first the input have initial value.
I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<hr/>
<hr/>
<hr/>
<button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{dynamicPopover.title}}
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{inputContent}}
<script type="text/ng-template" id="inputContent.html">
<div class="form-group">
<input type="text" ng-model="inputContent" class="form-control">
</div>
</script>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
title: 'Title'
};
$scope.inputContent = "hello";
});
Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.
You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.
Example Directive:
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
And to use it:
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}
<script type="text/ng-template" id="customPopover.html">
<div class="form-group">
<input type="text" ng-model="message" class="form-control">
</div>
</script>
Here is a working plunk. I hope this is what you're looking for
Following Code is not showing or updating the value of nam in <p> tag. Kindly help !
<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}} </p>
<script>
function myControl($scope){
$scope.nam = {
a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>
You should specify the app module in html page.
<html ng-app="Test">
<body ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}} </p>
Then inject the module and controller like as below.
var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
$scope.nam = {
a : "abcdefg"
};
});
In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myControl">
<input ng-model="nam.a" >
<p> Hello {{nam.a}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.nam = {
a: "abcdefg"
};
});
</script>
</body>
</html>
you should write like this
<body ng-controller="myControl">
<input ng-model = "nam.a">
<p> Hello {{nam.a}} </p>
</body>
https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview
<html>
<body ng-app="yourAppName">
<div ng-controller="myControl">
<input ng-model="nam.a">
<p> Hello {{nam.a}} </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
angular.module('yourAppName', [])
.controller('myControl', function($scope) {
$scope.nam = {
a: 'abcdefg'
}
});
</script>
</body>
</html>
use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angsc.js"></script>
</head>
<body>
<main ng-app="myModule">
<div ui-view=""></div>
<main>
</body>
</html>
This is my master page
<div ng-controller="myController">
<input type="button" value="Add" ng-click="addclick()">
<input type="button" value="Search" ng-click="searchclick()">
<br/>
</div>
This is my content page.
var myApp = angular
.module("myModule",['$mdDialog'])
.controller("myController",function ($mdDialog,$scope){
$scope.addclick=function(){
$mdDialog.show({
template:'addnew.html'
});
};
$scope.searchclick=function(){
$mdDialog.show({
template:'searchold.html'
});
};
});
This is my js file.
I also have 2 html files namely "addnew.html" and "searchold.html". Not getting pop up of those two files on button click. Is there an error in my code? Kindly help me..
Your dependent module name is wrong. Instead of $mdDialog it should be ngMaterial. $mdDialog is the service being injected in controller and is part of the ngMaterial module. Change your code as below to get it working:
var myApp = angular
.module("myModule",['ngMaterial'])
.controller("myController",function ($mdDialog,$scope){
$scope.addclick=function(){
$mdDialog.show({
template:'addnew.html'
});
};
$scope.searchclick=function(){
$mdDialog.show({
template:'searchold.html'
});
};
});
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script src="angsc.js"></script>
</head>
<body>
<main ng-app="myModule">
<div ng-controller="myController">
<input type="button" value="Add" ng-click="addclick()">
<input type="button" value="Search" ng-click="searchclick()">
<br/>
</div>
<main>
</body>
</html>
Codepen: http://codepen.io/addi90/pen/ZOEqZq
Here i am trying to call partial view from controller using angular js.
here is my code
<div ng-repeat='t in tabs'>
<div ng-include='t.templateUrl'></div>
<div>
when i try to include like ng-include="'/home/menutemplate'" it will includes the content. How can i dynamically do this? . Help me
t.templateUrl should be valid scope variable and should hold a string(path for the template):
$scope.t.templateUrl = "/home/menutemplate"
And in your template:
<div ng-include="t.templateUrl"></div>
It's exactly like what you did like this example
angular.module("app", []);
angular.module("app").controller("ctrl", function ($scope, $rootScope, $filter) {
$scope.templates = [
{url: "/Application/Partials/home.html"},
{url: "/Application/Partials/page2.html"}
]
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<div class="container">
<div ng-repeat="temp in templates">
<div ng-include="temp.url"></div>
</div>
<script type="text/ng-template" id="/Application/Partials/home.html">
<h1>home.html is here</h1>
</script>
<script type="text/ng-template" id="/Application/Partials/page2.html">
page 2 is here
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
I have just created a very simple app.
It only contains one function which is used in ng-click.
Somehow, ng-click is not firing.
Can anyone take a look for me?
Plunker:
http://plnkr.co/edit/DxwX5sJVaKABeC2JBF8M?p=preview
HTML
var app = angular.module('myApp');
app.controller('createController', ['$scope', function($scope){
$scope.submitProject = function(){
alert('wahaha');
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="form-group text-right">
<button class="btn btn-primary btn-lg" ng-click="submitProject()">Submit</button>
</div>
</body>
</html>
Add an ng-controller, so ng-click will know which controller is the function.
<div class="form-group text-right" ng-controller="createController as create">
<button class="btn btn-primary btn-lg" ng-click="create.submitProject()">Submit</button>
</div>
I recommend using controllerAs, try reading about this in this article.
you need to bind your controller by adding an ng-controller attribute like
<body ng-controller="createController">
to an element that encompasses the html that you would like to bind the scope of your createController to.
Adding the controller to an outer Div will solve your problem.
<div ng-controller='createController' class="form-group text-right">
Hope it helps.
It looks like the module 'myApp' is not correctly instantiated. It should be:
var app = angular.module('myApp', []);
This is because you need to pass in an array which is the list of modules myApp depends on. In this case, it is an empty array.
You will also need to add the controller to the view as suggested by previous answers.