var ImagesApp = angular.module('Images', []);
ImagesApp.directive('fancybox', function($q, $http, $templateCache) {
return function(scope, element, attrs) {
scope.ShowFullImageByClick = function() {
var el = '<input type="submit" id="comment-btn" class="mybtn" value="Comment" ng-click="AddComment()">'
$.fancybox.open(el);
}
}
});
<div id='full-image-view' style="display: none;" fancybox>
<div id='full-image-view-left'></div>
</div>
Well, for example...
HTML page template
<body ng-controller="Ctrl">
<b>Comment</b>
<add-comment comments="comments"></add-comment>
<div ng-repeat="comment in comments">
> {{ comment }}
</div>
</body>
Directive template
<div>
<form>
<div class="input-group">
<input class="form-control"
type="text"
placeholder="Add your comment..."
ng-model="comment">
<span class="input-group-btn">
<button class="btn btn-default"
type="button"
ng-click="add()">
Add comment
</button>
</span>
</div>
</form>
</div>
JavaScript
var app = angular.module('plunker', []);
app.controller('Ctrl', function($scope) {
$scope.comments = ['comment 1','comment 2'];
});
app.directive('addComment', function() {
return {
restrict: 'E',
scope: {
comments: '='
},
controller: function($scope) {
$scope.add = function() {
if ($scope.comment) {
$scope.comments.push($scope.comment);
$scope.comment = null;
}
};
},
templateUrl: 'add-comment-directive.html'
};
});
Screenshot
Related
I am stuck again with my angular ui-bootstrap modal window.
I have header which contains
<a ng-click="openLoginModal()">Zaloguj</a>
and have controller named headerCtrl.js
app.controller('HeaderCtrl', ['$scope', '$uibModal', 'ApiService', function($scope, $uibModal, ApiService) {
"use strict";
$scope.allGames = ApiService.GetGames();
$scope.openLoginModal = function(size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-login' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
ariaLabelledBy: 'modal-header',
ariaDescribedBy: 'modal-body',
templateUrl: 'app/views/modals/LoginModal.html',
controller: 'LoginModalCtrl',
controllerAs: '$ctrl',
backdropClass: "modal-backdrop",
size: size,
backdrop: true,
appendTo: parentElem,
resolve: {
items: function() {
return $scope.items;
}
}
});
};
}]);
After I click "Zaloguj" which starts openLoginModal method modal shows but doesn't have any content and in cosole shows error:
Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl
LoginModalCtrl is induced in headerCtrl at line 14:
controller: 'LoginModalCtrl',
LoginModalCtrl.js code:
app.controller('LoginModalCtrl', ['$scope', '$location', '$uibModalInstance', 'authenticationService', function($scope, $location, $uibModalInstance, authenticationService) {
var $ctrl = this;
$ctrl.modalInstance = null;
$ctrl.animationsEnabled = true;
$ctrl.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$ctrl.login = function() {
authenticationService.login($ctrl.loginData)
.then(function(data) {
$uibModalInstance.close();
$location.url("/");
}, function(error) {
});
};
}]);
EDIT
Modal template code is:
<div class="modal-login">
<script type="text/ng-template" id="loginModalContent.html">
<div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
</div>
<div class="modal-body">
<form method="post" name="loginData">
<label for="login">Login:</label>
<input type="text" placeholder="login123" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />
<label for="password">Hasło:</label>
<input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />
<div class="row forget-valid">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
Zapomniałem hasła
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
<span ng-show="(loginData.login.$touched && loginData.login.$invalid)||(loginData.password.$touched && loginData.password.$invalid)" class="error">
Pola nie mogą zostać puste!
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-button" ng-click="$ctrl.cancel()">Zamknij</button>
<button type="button" ng-disabled="loginData.login.$invalid || loginData.password.$invalid" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
</div>
</div>
</div>
</script>
help
You need to include $uibModal as a parameter to the controller function just like you have done for $scope.
I am using a ui-bootstrap modal to submit a form, my modal is loading fine but my "Cancel" button doesn't work properly and i am getting the above mentioned error message.
my app.js
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('empCtrl', [
'$scope', '$http', '$uibModal', '$uibModalInstance', function ($scope, $http, $uibModal, $uibModalInstance) {
$scope.employees = "";
$http.get("/Home/GetEmployees").success(function(result) {
$scope.employees = result;
}).error(function(result) {
alert("error");
});
$scope.saveData = function(employee) {
$http.post("/Home/AddEmployee", { employee: employee }).sucess(function(result) {
alert(result);
}).error(function(result) {
alert(result);
});
}
$scope.showCreateEmployeeForm = function() {
$uibModal.open(
{
templateUrl: "app/employeeTemplate/employeeAdd.html",
controller: 'empCtrl'
});
$uibModalInstance.cancel();
}
$scope.cancelForm= function() {
$uibModalInstance.dismiss();
}
}
]);
my modal in html
<div class="container" ng-controller="empCtrl">
<div class="modal-header">
<h1>Create Employee</h1>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-lg-4 input-group">
<label>Name</label>
</div>
<div class="col-lg-6">
<input type="text" ng-model="employee.name" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 input-group">
<label>Address</label>
</div>
<div class="col-lg-6">
<input type="text" ng-model="employee.address" />
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-sm-offset-3 col-sm-9" >
<input type="submit" value="Save" name="Save" ng-click="saveData(employee)" />
<input type="submit" value="Cancel" class="btn btn-success" ng-click="cancelForm()" />
</div>
</div>
</div>
can someone please help me to figure out what's going on with my code.
Cheers!!!
There is something weird on the controller. For the modal and for place where you init the modal you use the same controller. Your code should be in this format:
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('empCtrl', [
'$scope', '$http', '$uibModal', function ($scope, $http, $uibModal) {
$scope.employees = "";
$http.get("/Home/GetEmployees").success(function(result) {
$scope.employees = result;
}).error(function(result) {
alert("error");
});
$scope.showCreateEmployeeForm = function() {
$uibModal.open(
{
templateUrl: "app/employeeTemplate/employeeAdd.html",
controller: function($scope, $http, $uibModalInstance){
$scope.saveData = function(employee) {
$http.post("/Home/AddEmployee", { employee: employee }).sucess(function(result) {
alert(result);
}).error(function(result) {
alert(result);
});
}
$scope.cancelForm= function() {
$uibModalInstance.dismiss();
}
}
resolve: {
return $scope.employees;
}
});
}
}
]);
I am new in angular.js. I have to display in a modal the selected value of input, but I don't succeed.
I have the following inputs:
<form>
<input type="radio" name="toggleDiv" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
I have to open a popup dialog and display the value of the selected value.
The moodal:
<div class="row" ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ inputsVal }}
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
I try the following function:
app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
$scope.open = function () {
$scope.inputsValue=$('input:checked').val()
return $scope.inputsValue
}}
}
your implementation is wrong.check anguar ui bootstrap modal documentation.
You have to do like this
$scope.open = function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.myForm;
}
}
});
in your controller,
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
in html,
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ items.input}}
</div>
</script>
<form>
<input type="radio" name="toggleDiv" ng-model="myForm.input" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
edit
If you want to work with jquery way then you need to use $apply()
$scope.$apply(function () {
$scope.inputsValue=$('input:checked').val();
});
hope this helps .. :)
first, iam using AngularJS v1.3.14
i try to push : label ,input ,button html element
here my html code:
<div class="container" ng-controller="ctrl" >
<div class="form-inline" ng-repeat="c in controls">
<label class="control-label">Name:</label>
<input class="form-control">
<button class="btn btn-danger">X</button>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
and script code:
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
$scope.controls.push({
...
})
};
});
and my question is: how can i push div with controls id.
try this, you need to dynamically add the html controls in a array then re-rendering the array abject values by using ng-repeat
Html code
<div class="form-inline" ng-repeat="c in controls">
<div ng-bind-html="c.htmlValue | to_trusted"></div>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
Js Code
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
var stringValue="<label class=\'control-label\'>Name:</label><input class=\'form-control\'><button class=\'btn btn-danger\'>X</button>"
$scope.controls.push({ "htmlValue": stringValue })
};
}).filter('to_trusted', ['$sce', function ($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
See this working code in
Plunker
Demo Image
finally i found the solution:
html:
<div class="container" ng-controller="ctrl">
<div class="form-inline" ng-repeat="todo in todos track by $index">
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="todos[$index]">
<button class="btn btn-danger" ng-click="remove($index);">X</button>
</div>
<div class="form-inline">
<button class="btn btn-primary" ng-click="add();">+</button>
</div>
scripts:
angular.module('app', [])
.controller('ctrl', function ($scope) {
$scope.todos = [''];
$scope.add = function () {
$scope.todos.push({});
console.log($scope.todos);
};
$scope.remove = function (index) {
$scope.todos.splice(index, 1);
};
});
hope this help.
The button was not inside the scope of the controller. At the bottom you can find a link with the PLNKR demonstratic a basic use.
angular.module("app", [])
.controller("ctrl", function ($scope) {
$scope.controls=[];
$scope.add = function () {
$scope.controls.push('')
};
});
HTML:
<body ng-app="app">
<div ng-controller="ctrl" >
<div class="container" >
<div class="form-inline" ng-repeat="c in controls">
<label class="control-label">Name:</label>
<input class="form-control" ng-model="c">
<button class="btn btn-danger">X</button>
</div>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
</div>
</body>
Example
I have to show user login page in pop up and have to validate user name and password with the server by using angular js. I create one app model file, and one controller, service and one directive. My code looks like bellow,
app.js
angular.module('mint', ['ngAnimate', 'toastr']);
mycontroller.js
angular.module('mint').controller(
'headercontroller',
[
'$scope',
'headerservice',
'toastr',
function($scope, headerservice, toastr) {
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.userSignin = function(){
$scope.userloginbtn = false;
if($scope.signin_form.$valid){ //Error on this line signin_form is undefine. using $valid for undefine
var record = {};
angular.extend(record, $scope.signinForm);
console.log(record);
}else {
$scope.signin_form.submitted = false;
$scope.userloginbtn = true;
}
};
} ]);
my directive.js file is
angular
.module('mint')
.directive(
'modal',
function() {
return {
template : '<div class="modal fade">'
+ '<div class="modal-dialog">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
+ '<h4 class="modal-title"><span><i class="fa fa-user"></i> {{ title }}</span></h4>'
+ '</div>'
+ '<div class="modal-body" ng-transclude></div>'
+ '</div>' + '</div>' + '</div>',
restrict : 'E',
transclude : true,
replace : true,
scope : true,
link : function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
My html file looks like
<!DOCTYPE html>
<html lang="en" ng-app="mintmygold">
<body>
<div class="container-fluid ban_bg"
ng-controller="headercontroller">
<div class="but_bg">
<button type="button" class="btn btn-default btn_sin" ng-click="toggleModal()">
<span><i class="fa fa-key"></i> Sign In</span>
</button>
</div>
<modal title="Login" visible="showModal">
<form role="form" name="signin_form" class="signup_form" novalidate
ng-model="signin_form">
<div class="form-group">
<p class="infoMsg" ng-model="signinform_info">Please fill in your login credentials:</p>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input ng-model="signinForm.userEmail" name="userEmail" type="email" class="form-control" id="email" placeholder="Enter email" required />
<div
ng-show="signin_form.$submitted || signin_form.userEmail.$touched">
<span ng-show="signin_form.userEmail.$error.required">Enter your
email.</span> <span ng-show="signin_form.userEmail.$error.email">This
is not a valid email.</span>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input ng-model="signinForm.userPassword" name="userPassword" type="password" class="form-control" id="password" placeholder="Password" required />
<div
ng-show="signin_form.$submitted || signin_form.userPassword.$touched">
<span ng-show="signin_form.userPassword.$error.required">Enter your
password.</span>
</div>
</div>
<button ng-disabled="signin_form.$invalid || !userloginbtn" ng-model="signin" ng-click="userSignin()" type="submit" class="btn btn-primary">Submit</button>
</form>
</modal>
</div></body></html>
Now i can show the popup when click on sign in button. When i submit the form i couldn't get the values of email and password values from the pop up form in controller. what is my mistake of using the scope. Please any one help me.
With a quick overlook, it seems a silly mistake. Change your lines
From
angular.module('mint', ['ngAnimate', 'toastr']);
To
angular.module('mintmygold', ['ngAnimate', 'toastr']);
You are using scope: true which means your directive is creating a child scope and inheriting the properties from its parent.
Therefore any property you define in the directive scope does not exists on you controller scope.
Changing form name=signin_form
for form name=$parent.signin_form or scope: false should fix the problem
I didn't test this though. And it's not a good solution.
I would probably create a service that launches the pop-up and returns a promise that gets resolved/rejected accordingly.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, modal) {
$scope.launch = function(){
modal.show().then(function(user){
console.log(user)
}, function(err){
console.log(err)
});
}
});
app.factory('modal', ["$document", "$compile", "$rootScope", "$templateCache", "$timeout", "$q",
function ($document, $compile, $rootScope, $templateCache, $timeout, $q) {
var $body = $document.find('body');
return {
show: function(){
var defer = $q.defer(),
child = $rootScope.$new();
child.user = {};
child.close = function(){
defer.reject('canceled');
tpl.remove();
}
child.submit = function(){
defer.resolve(child.user);
tpl.remove();
}
var tpl = angular.element($templateCache.get('modal.html'));
$compile(tpl)(child);
$body.append(tpl);
return defer.promise;
}
};
}]);
index.html
<script type="text/ng-template" id="modal.html">
<div class="modal in" style="position: static; display: block">
<div class="modal-dialog">
<form ng-submit="submit()" class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Email: <input ng-model="user.email"></input><br>
Password: <input ng-model="user.password"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()">Close</button>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
</div>
</div>
</script>
<button type="button" ng-click="launch()" class="btn btn-primary">Show modal</button>
Plunker
This is just a proof of concept. I think is enough to get you started. I'd strongly recommend to checkout UI Bootstrap and the way the implement their modal