I've got a custom dropdown that is a simple div that appears when you focus in on aa input. This dropdown contains another dropdown. This one is a "real" dropdown class from uikit. I can't dismiss the uikit dropdown if I click outside that. A user is obliged to close all dropdowns to close that one. Here's a jsfiddle anyway: http://jsfiddle.net/8y48q/59/
Here is the HTML part:
<div ng-app="myApp">
<div class="uk-width-1-1" ng-controller="TestCtrl">
<form id="form" class="uk-form uk-width-1-1 center-form">
<!-- This is a button -->
<input id="input" data-ng-click="openSearch()" hide-search="hideSearchContainer()" type="text" placeholder="text" class="uk-width-1-1 uk-vertical-align-middle">
<div hide-search="hideSearchContainer()" data-ng-class="{'search-results':userSearch, 'search-results-closed':!userSearch}" class="search-results-closed scrollable-vertical">
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click'}">
<!-- This is the button toggling the dropdown -->
<button class="uk-button">...</button>
<!-- This is the dropdown -->
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a ng-click="test()" href="">First1</a></li>
<li><a ng-click="test()" href="">Second2</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
Here is the Angularjs part:
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', function ($scope) {
$scope.openSearch = function(){
$scope.userSearch = true;
};
$scope.hideSearchContainer = function(){
$scope.userSearch = false;
};
$scope.test = function(text) {
alert("Hi");
}
});
myApp.directive('hideSearch', function($document){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
e.stopPropagation();
});
$document.bind('click', function() {
scope.$apply(attr.hideSearch);
})
}
}
});
Related
When clicking module class it shows emptylabel. but i cant hide the module class.
<div id="b" class="tab-pane fade in active" >
<div class="secondrow">
<div ng-show="divshow">
<label class="emptylabel"> <input type="button" value="back" class="backbutton" ng-click="hidediv()"></label>
</div>
<div class="module">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
<div class="col-sm-4"><label>Jawaharlal Nehru</label></div>
<div class="col-sm-1"><label>111111</label></div>
<div class="col-sm-2"><label>2222222</label></div>
<div class="col-sm-3"><label>3333333</label></div>
</a>
</div>
Controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
$scope.module = false;
}
// Hide Div
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
I'm not sure if I understand your question correctly. If you want to toggle between the emptylabel and module, the you can use ng-show for both of them, based on the divshow variable:
<div ng-show="divshow">
<label class="emptylabel">
<input type="button" value="back" class="backbutton" ng-click="hidediv()">
</label>
</div>
<div class="module" ng-show="!divshow">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
...
</a>
</div>
controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
}
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
What does your ng-controller declaration in the HTML look like? For example mine usually look something like this, with the capture variable 'vm':
<div data-ng-controller="FooController as vm">
<div>
<span data-ng-click="vm.showDiv()"></span>
</div>
</div>
Inside your controller:
function FooController() {
var vm = this;
vm.showDiv = showDiv;
function showdiv() {
// Your code here
}
}
I just started learning so I'm creating a todo app.
I'm trying to show a div when I click on the edit button to edit my task.
this is my html
<div ng-controller='TasksCtrl'>
<div ng-repeat='(key, task) in tasksList' class='task-list'>
<div class='easy'>
<div class='div-list-style'></div>
<div id='task-{{key}}' style='cursor:pointer;z-index:5'
ng-click='editTask()' data-key='{{key}}' class='options
pull-right glyphicon glyphicon-pencil'>
</div>
<div class='task-desc' ng-bind='task.description'></div>
<div ng-hide='taskEdit = true'>FORM</div>
</div>
</div>
</div
This is my controller
todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
$scope.editTask= function(){
todoApp.directive('taskEdit', function(){
return function(scope, element){
//so I guess over here I need do ngHide = 'false' ? //
alert(element.attr('data-key'));
};
});
};
}]);
Here is a quick solution, you have a scope variable called taskShow that will tell ng-hide when to show it, then on ng-click you will trigger a function that will toggle that value:
<div ng-controller='TasksCtrl'>
<div ng-repeat='(key, task) in tasksList' class='task-list'>
<div class='easy'>
<div class='div-list-style'></div>
<div id='task-{{key}}' style='cursor:pointer;z-index:5'
ng-click='toggleHide(key)' data-key='{{key}}' class='options
pull-right glyphicon glyphicon-pencil'>
</div>
<div class='task-desc' ng-bind='task.description'></div>
<div ng-show='taskShow[key]'>FORM</div>
</div>
</div>
</div>
Controller:
todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
$scope.taskShow = {};
$scope.toggleHide = function (key) {
$scope.taskShow[key] = !$scope.taskShow[key];
};
}]);
Edit: switched ng-hide to ng-show so the divs are hidden by default and only shown when the other is clicked.
I have created a directive character-counter for character counter when user enter text into textarea its working as expected but i am having one issue here when user finish typing in textarea i have to click on save to post the data but because of focusOut i have to click twice on save button so on first click it focus out the counter and second click i am able to save the data.
Is there any other solution that can take care of this problem that i can use for this directive ?
main.html
<div class="row">
<div class="col-md-12">
<textarea rows="8" class="textAreaModal" ng-model="ratingQstnResult.rationaleSelect[ratingQstnResult.rationaleSelectedKey]" maxlength="4000" character-counter></textarea>
</div>
</div>
<div class="row">
<div class="modal-footer">
<button type="submit" class="btn btn-primary pull-right" ng-click="rationaleWin.close();">Save</button>
<button class="btn btn-default" ng-click="ratingQstnResult.rationaleSelect[ratingQstnResult.rationaleSelectedKey]=null; rationaleWin.close();">Cancel</button>
</div>
</div>
directive.js
angular.module('riskAssessmentApp').directive('characterCounter', function () {
'use strict';
return{
restrict: 'A',
require: '^ngModel',
link: function (scope, element, attrs, ngmodel) {
var characterCount;
element.after('<p class="character-count" style="display: none;"><span class="characters-left"></span> characters left</p>');
element.focus(function(){
element.next().show();
});
element.focusout(function(){
element.next().hide();
});
scope.$watch(function(){
return ngmodel.$viewValue;
}, function(newVal){
if(newVal){
characterCount = parseInt(attrs.maxlength - newVal.length, 10);
} else{
characterCount = parseInt(attrs.maxlength, 10);
}
element.next().find('.characters-left').text(characterCount);
});
}
};
});
you don't return the event from the focusout() method and the event is not propagating. Try this:
element.focusout(function(event){
element.next().hide();
return event;
});
I have a problem with directive.
In my directive i have init() a video player manipulation plugin.
Now in my html i have 2 buttons:
playVideo
markIn()
I want that user click on markIn() button directive return markin value to controller.
How ca do this?
I'm junior in angular.js
Thanks in advance
DIRECTIVE CODE
mwm3.directive('videoPlayer', function() {
return{
restrict: 'E',
link: function(scope, element, attrs) {
var myPlayer = angular.element(document.querySelector('#videoPlayer'));
element = VideoFrame({
id: myPlayer,
frameRate: 25,
callback: function(response) {
console.log('response');
}
});
scope.playVideo = function() {
//play video function
element.video.play();
}
scope.markIn = function() {
//markIn time
var markIn= element.toSMPTE();
//here i want return this value to my controller when user click on button ng-click="markIn()" in directive
}
}
}
});
CONTROLLER CODE
mwm3.controller('TestPlayerCtrl', function($scope) {
$scope.markIn = function(valueFromDirective) {
//here i want value Mrkin from directive MarkIn function when user click on markIn button
console.log(valueFromDirective);
};
});
HTML CODE
<video id="videoPlayer" width="100%" controls src="asset/tc3.mp4" type="video/mp4"></video>
</section>
<section id="videoControls">
<div class="row more-margin-bottom">
<div class="col-sm-12">
<button ng-click="playVideo()" class="btn btn-large btn-inverse"><i class="fa fa-play-circle fa-2x"></i></button>
<button ng-click="markIn()" class="btn btn-large btn-inverse"><i class="fa fa-pause fa-2x"></i></button>
</div>
</div>
</section>
</video-player>
In my directive the example I was looking at here uses <a href="#" ... to put the new image in the container div. I've tried to create that same functionality in my directive but when I click my images it doesn't change my pictBox div. Could I be missing stuff in my css file? Why is the background-image text there? This is my directive:
app.directive('smallPictureBox', [function(){
return {
restrict: 'CA',
replace: false,
transclude: false,
scope: {
index: '=index',
item: '=itemdata'
},
template: '<img src="{{item.url}}"/>',
link: function(scope, elem, attrs) {
if (parseInt(scope.index)==0) {
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
}
elem.bind('click', function() {
var src = elem.find('img').attr('src');
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
});
}
}
}]);
This is what my html looks like:
<div class="shadow">
<div class="pictureBox">
<div id="pictBox">
<img ng-src="{{primaryImage.url}}">
</div>
</div>
<div class="lowerPictureBox">
<div ng-repeat="image in item.images" options='#pictBox' itemdata='image' index="$index" class="smallPictureBox">
<img ng-src="{{image.url}}">
</div>
</div>
</div>
How can make it so that when I click a picture in the lowerPictureBox it displays it in the pictureBox?
Although i could not replicate your total example but i have a set up a small working code which displays image on top when u click bottom image this could help you
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
</head>
<body ng-controller="main">
<div class="shadow">
<div class="pictureBox">
<div id="pictBox">
<img ng-src="{{primaryImage.url}}">
</div>
</div>
<div class="lowerPictureBox">
<div small linksrc="primaryImage"></div>
</div>
</div>
<script>
var app = angular.module("demo", []);
app.controller('main', function ($scope) {
$scope.primaryImage = { url: '' };
});
app.directive('small', [function () {
return {
scope: { src: '=linksrc' },
replace:true,
template:"<img ng-src='http://angularjs.org/img/AngularJS-small.png'>",
link: function (scope, elem, attrs) {
elem.bind("click", function () {
scope.src.url = 'http://angularjs.org/img/AngularJS-small.png';
scope.$apply();
});
}
}
}]);
</script>
</body>
</html>