can you please tell me how to make dirctive in angular js .I need to use owl carousel plugin in js as I did in jqm fiddle http://jsfiddle.net/ezanker/o9foej5L/1/
.I need to make same thing in angular using directive can you please tell me how I will implement this using directive
http://plnkr.co/edit/4ySYwsqrBKUJUj6MwoRY?p=catalogue
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href=" http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="script.js"></script>
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
</head>
<body>
<div id="owl-demo">
<div class="item"><p>one</p></div>
<div class="item"><p>two</p></div>
<div class="item"><p>three</p></div>
<div class="item"><p>four</p></div>
</div>
</body>
</html>
You can use a directive like this:
app.directive('owlCarousel', function() {
return {
restrict: 'A',
scope: {
owlOptions: '='
},
link: function(scope, element, attrs) {
$(element).owlCarousel(scope.owlOptions);
}
};
});
And on the HTML add it as an attribute:
<div owl-carousel owl-options="owlOptions">
...
</div>
Demo
Here is my general solution. This works with ngrepeat and with refresh data of the scope. The trick is add a directive for the last item, so the init will be fired when the last item is in the dom.
<div owl-slides-count="3" owl-carousel="">
<div ng-repeat="post in posts" owl-carousel-item="">
...
</div>
</div>
... the js
.directive('owlCarousel', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.initCarousel = function () {
// hacky ondomready
$timeout(function hackyDomReady() {
// if is already initialized destroy and re create it
// $(element).data().owlCarousel <- owl 2
if ($(element).data('owlCarousel')) { // <- owl 1
// $(element).trigger('destroy.owl.carousel'); // <- owl 2
$(element).data('owlCarousel').destroy();// <- owl 1
}
$(element).owlCarousel({
autoPlay: 10000,
navigation: true,
items: attrs.owlSlidesCount
});
});
};
}
};
}])
.directive('owlCarouselItem', [function () {
return {
restrict: 'A',
transclude: false,
link: function (scope, element) {
if (scope.$last) {
scope.initCarousel();
}
}
};
}])
Related
Angular directive is not working for the following case. In the my following angular application I have two kinds of item I wish to display which are stored in controller.
To display them I have created the directives for both cases, and iterating over list with ng-repeat, but the items are not being rendered.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style media="screen">
.selected {
background: #cdcdcd;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<div class="" ng-repeat="item in listctrl.items">
<itemtype1 ng-if="item.type_ === 'type1'" val="item.val"></itemtype1>
<itemtype2 ng-if="item.type_ === 'type2'" val="item.val"></itemtype2>
</div>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.items = [];
listctrl.items.push({'val':'A', 'type_': 'type1'});
listctrl.items.push({'val':'B', 'type_': 'type2'});
listctrl.items.push({'val':'C', 'type_': 'type1'});
listctrl.items.push({'val':'D', 'type_': 'type2'});
})
.directive('itemtype1', function() {
return {
template: '<strong>{{$scope.val}}</strong>',
restrict: 'E',
scope: {
val: '='
},
link: function postLink(scope, element, attrs) {
}
};
})
.directive('itemtype2', function() {
return {
template: '<i>{{$scope.val}}</i>',
restrict: 'E',
scope: {
val: '='
},
link: function postLink(scope, element, attrs) {
}
};
});
</script>
</body>
</html>
My first guess, just glancing through it, is that you should change the following:
template: '<strong>{{$scope.val}}</strong>'
to this:
template: '<strong>{{val}}</strong>'
I am new to Angular.JS. I am struggling last 6 hours.
I read the data from HTTP and send back to the view as a autocomplete state. Previously it was a select box. I decided to change to autocomplete from a select box.
Plunker Link: http://embed.plnkr.co/MbhALuekWNDqnYFyjbOF/
Here have to return two values. One is ID and another one is the description. Because user going search by description. but have to return back ID of the respective user selection.
Error:
angular.min.js:124 TypeError: elem.autocomplete is not a function
at Object.link (main.js:217)
at angular.min.js:17
at wa (angular.min.js:85)
at q (angular.min.js:71)
at f (angular.min.js:62)
at q (angular.min.js:71)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62) "<input client-complete="" class="form-control ng-pristine ng-untouched ng-valid" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">"
(function (angular) {
'use strict';
var app = angular.module('myApp', [ 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngResource']);
app.directive('clientComplete',['$filter',clientCompleteDir]);
app.controller('AccountMappingCtrl', ['$scope', '$http', 'NgTableParams', AccountMappingcontroller]);
function AccountMappingcontroller($scope, $http, NgTableParams) {
//-------------------------------------------------------------------------------------------------
var vm = this;
vm.client ={COMPANY_ID:'', COMPANY_DESC:''};
/* $http.get("http://localhost:52087/api/companydetails").then(function(response) {
var convertToJson = angular.fromJson(response.data);
$scope.dataSource = convertToJson;
}); */
$scope.dataSource = [{'COMPANY_ID':'10001','COMPANY_DESC':'THIRDROCK','COMPANY_CURRENCY':'AUS','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'},{'COMPANY_ID':'10002','COMPANY_DESC':'OBN TECH','COMPANY_CURRENCY':'INR','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'}];
$scope.setClientData = function(item){
if (item){
vm.client = item;
}
}
} //controller
//directive
function clientCompleteDir($filter) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.autocomplete({
source: function (request, response) {
//term has the data typed by the user
var params = request.term;
//simulates api call with odata $filter
var data = scope.dataSource;
if (data) {
var result = $filter('filter')(data, {COMPANY_DESC:params});
angular.forEach(result, function (item) {
item['value'] = item['COMPANY_DESC'];
});
}
response(result);
},
minLength: 1,
select: function (event, ui) {
//force a digest cycle to update the views
scope.$apply(function(){
scope.setClientData(ui.item);
});
},
});
}
};
}
})(angular);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Account Mapping Maintenance </title>
<!-- Bootstrap -->
<link href="./vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="./vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="./build/css/custom.min.css" rel="stylesheet">
<link href="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body class="nav-md" ng-app="myApp" ng-controller="AccountMappingCtrl as vm">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_ID" placeholder="enter name" type="hidden">
<!-- Angular CDN -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script src="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<!-- jQuery -->
<script src="./vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="./vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="./vendors/fastclick/lib/fastclick.js"></script>
<!-- Custom Theme Scripts -->
<script src="./build/js/custom.min.js"></script>
<script src="./Controller/main.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
You need first to load jquery, than jquery-ui and than angular to eliminate that error:
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="jquery-ui#1.11.2" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script data-require="jquery-ui#1.11.2" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.6.6/angular.js"></script>
Here is small working plunker with one input for filtering source data, hoppefuly it will make easier for you to continue: plunker
(start typing THIRDROCK)
I'm new to angularJS. When I click a button it will show a dialog, the dialog's html code is:
<img id="imgId" ng-src="{{imgSrc}}">
In controller, when I try to access imgId using JavaScript it showing null. Same with the JQuery.
console.log(document.getElementById('imgId')); // null
Here is my code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
(plunker)
You need to give the dialog a chance to render, before you can get a reference to it.
Wrap the getElementById calls in a $timeout:
$timeout(function(){
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
Keep in mind that you need to include the $timeout in your controller:
function DialogController($scope, $timeout) {
Here's a working example using your plunker's code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
I am troubling with angular js error
angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)
index.php code is
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/style.css" />
<script src="<?php bloginfo('template_url')?>/angular-animate.js"></script >
<script src="<?php bloginfo('template_url')?>/script.js"></script>
</head>
<body ng-controller="Ctrll">
<p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>
<button ng-click="showAlerts()" style="float:left">
click to toggle panel
</button>
<!--sliding panel directive-->
<alerts-center ng-if="parentslide"></alerts-center>
</body>
</html>
js code is
angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.parentslide =false;
$scope.showAlerts = function($event) {
$scope.parentslide =true;
$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.php',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});
If you working in plunker its fine. If not then the error may be due to
<script data-require="angular.js#1.2.20" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script data-require="angular-animate#1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>
data-require and data-semver are actually specific implementations by Plunker.
Better to use:
bower install angular-animate
and add the script tag
< script src="/bower_components/angular-animate/angular-animate.js"></script >
finally Dependency injection
angular.module('myApp', ['ngAnimate']);
I'm trying to turn an existing jquery plugin into a directive to use in my angular app.
My html:
<div ng-controller="BoxController">
<ul class="bxslider" bx-slider="{mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true}">
<li ng-repeat="obj in items track by $index">
<div class="item"><img ng-src="{{obj + $index}}" /></div>
</li>
</ul>
</div>
So my directive is bx-slider or bxSlider
app.directive('bxSlider', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
angular.element(element).bxSlider(scope.$eval(attrs.bxSlider));
}
}
});
What happens is I get a list of images in a bulleted list. The CSS is certainly getting applied however the actions of it being a carousel isn't working. It is supposed to be something like this:
http://bxslider.com/examples/carousel-dynamic-number-slides
However I get
http://dopserv1.dop.com/bxslider/
with no errors in the console or anything. If I do a console.log on attrs.bxSlider I see all the params I defined in the HTML above. What am I doing wrong here? I am including jQuery 1.10.2 above the angular include.
Here's working example: http://plnkr.co/edit/KCwzmG?p=preview
With the part of the solution coming from here.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-controller="BoxController">
<ul class="bxslider" data-bx-slider="mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true">
<li data-ng-repeat="obj in items track by $index" data-notify-when-repeat-finished>
<div class="item">
<img data-ng-src="http://lorempixel.com/400/200/sports/{{$index + 1}}/" />
</div>
</li>
</ul>
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('BoxController', ['$scope', function ($scope) {
$scope.items = [1, 2, 3, 4, 5];
}]);
app.directive('bxSlider', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$on('repeatFinished', function () {
console.log("ngRepeat has finished");
element.bxSlider(scope.$eval('{' + attrs.bxSlider + '}'));
});
}
}
}])
.directive('notifyWhenRepeatFinished', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('repeatFinished');
});
}
}
}
}]);