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.
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
I have a div
<div class="error-text" ng-if="customerIdLength > customerIdMaxLength" ng-init="error='yes'" >Error presented</div>
here ng-if is working properly.
But
Based on ng-init value i am disabling a button like this:
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
this is not working. If i am putting this ng-init to some other element which don't have ng-if then it is working properly. So what is the reason behind?
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<div class="error-text" ng-init="$parent.error='yes'" ng-if="1 > 0">Error presented</div>
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
<script>
// Code goes here
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
}
])
</script>
</body>
</html>
you need to use $parent to get inner scope inside ng-if.
The difference between ng-if and ng-show is that ng-if actually REMOVES the html element attached to it from the DOM, causing your ng-init expression not to be executed.
Simply replacing it by ng-show should do the trick
<div class="error-text" ng-show="customerIdLength" ng-init="error='yes'">Error presented</div>
I think the logic is sound but it might be missing some angularjs setup and configuration like ng-app and ng-controller declaration in the markup.
Ensure that this is declared at the top
<div ng-app="github" ng-controller="githubRepos">
<!-- Your code -->
</div>
Solution
The following code is not hiding span, How can i hide the span.i am asking this question as i am new to angularjs.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$scope.myVar=true;
</script>
<body ng-app="" >
<span ng-hide="myVar">
Click here for admin role
</span>
</body>
</html>
You need a module first, then a controller or a directive.
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("myApp")
.controller("myController", function ($scope) {
$scope.myVar = true;
});
</script>
<body ng-controller="myController">
<span ng-hide="myVar">
Click here for admin role
</span>
</body>
</html>
You haven't bootstrapped your application properly to make it an Angular app.
You need to create a main module
You need to attach the main module to the shell/index.html
You need a Controller to perform data-binding, user interactions, etc
You need to write your very first "Hello, World!" app using AngularJS as it very common writing a "Hello, World!" application when you're getting started with any technology.
ng-app directive is used to define the part of the HTML which will be an Angular app, it's value is an optional application module name to load. See this post about using-ng-app-without-a-value
Show or hide content using Angular 1.0.1 without specifying the main module in the ng-app directive
//angular
//.module('demo', [])
//.controller('DefaultController', DefaultController);
//DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</span>
</div>
</div>
Please check the below example using $scope object to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</span>
</div>
</div>
Please check the below example using controller aliasing syntax, to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.isAdmin = false;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<span ng-show="ctrl.isAdmin">
Click here for admin role
</span>
<span ng-hide="ctrl.isAdmin">
Click here for user role
</span>
</div>
</div>
My drag and drop is not working. Can anyone tell me what wrong in it?
html link:
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">
</script>
<script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="myModule" ng-controller="myController">
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}
</div>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:100px; margin-top:40px;border-color:green;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}
</div>
</div>
</body>
Angular code:
var myApp = angular.module("myModule",[]);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
Register the angular-drag-and-drop module in your app:
var myApp = angular.module("myModule", ['ang-drag-drop']);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
I came across three show-stoppers when I tried to make this work:
First, verify that the path to the component actually exists. On my machine, at least, Bower installs to ./bower_components/, not ./components/.
Simo Endre is right that the component needs to be registered, but it needs to be registered as ngDragDrop, not ang-drag-drop.
Finally, the component in question (codef0rmer/angular-dragdrop) relies on jQuery and jQuery-UI to do its magic, so you'll need to add them to your project:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
...
</head>
Not sure if this last one is a deal-breaker for you, given the title of your question. ¯_(ツ)_/¯
Anyway, after making those changes the code seems to work as intended.
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