This is the directive with the function that is supposed to be called when clicked.
ebApp.directive('monthDir', function () {
return {
restrict: 'E',
templateUrl: 'htmlFiles/monthDirective.html',
transclude: true,
scope: {
ebObj: "=obj"
},
link: function link(scope, element, attrs, ngModelCtrl) {
scope.removeDir = function (removeVal) {
console.log("asd"); //not showing in the console
}
console.log(scope);
},
controller: function ($scope) {
}
}
})
The ng-click in the following directive is not working. The directive's html
<div class="row monthDirC">
<span class="glyphicon glyphicon-remove-sign pull-right cursorC"
ng-click="removeDir(ebObj.costArray[count])" ></span>
<div class="form-group">
<label for="datepick" class="col-md-6">Select month</label>
<md-datepicker id="datepick" class="col-md-6" ng-model="ebObj.costArray[count].myDate"
md-placeholder="Enter date"
md-min-date="minDate"
md-max-date="maxDate">
</md-datepicker>
</div>
The html that uses the directive:
<div class="col-md-12">
<month-dir ng-transclude ng-repeat="count in ebObj.costArray[0].countArray" obj="ebObj.costArray[count+1]"></month-dir>
</div>
It is working correctly. Make sure you don't have any errors. Try this,
var ebApp = angular.module('ebApp', []);
ebApp.controller('MainCtrl', function($scope) {
$scope.ebObj = 'someVal';
});
ebApp.directive('monthDir', function() {
return {
restrict: 'E',
template: '<div ng-click="removeDir()"><b>Click Me</b><ng-transclude></ng-transclude></div>',
transclude: true,
scope: {
ebObj: '=obj'
},
link: function link(scope, element, attrs, ngModelCtrl) {
scope.removeDir = function (removeVal) {
console.log('asd'); //not showing in the console
}
},
controller: function ($scope) {
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="ebApp" ng-controller="MainCtrl">
<month-dir ebObj="ebObj"><i>Click Me!</i></month-dir>
</div>
Related
I have the following code in my directive:
testModule.directive('TestOne',function(){
return{
replace: true,
controller: 'TestCtrl',
link: function(scope, element, attrs){
element.on('click', function(e) {
//my own code is there
});
}
}
}
I wanted to call the above click function on ng-click with the below event in html(ng-click="mytest()"). How can I call or write exactly so that I can execute my function requirements in the above directive's element click function as per my requirements.
html:
<div test-one ng-repeat="items in testjson">
<div class="title">{{items.name}}</div>
<div class="context-menu">
<ul>
<li ng-click="mytest()">TestFunction</li>
</ul>
</div>
</div>
Thanks in advance.
First make the first letter of the directive simple
directive('TestOne',function(){
to
directive('testOne',function(){
Then create a scope function for ng-click inside the link function
.directive('testOne',function(){
return{
restrict : 'A',
replace: true,
link: function(scope, element, attrs){
scope.mytest = function() {
console.log("working")
}
}
}
})
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.testjson = [{"name":"sss"},{"name":"ssss"}]
}).directive('testOne',function(){
return{
restrict : 'A',
replace: true,
link: function(scope, element, attrs){
scope.mytest = function() {
console.log("working")
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div test-one ng-repeat="items in testjson">
<div class="title">{{items.name}}</div>
<div class="context-menu">
<ul>
<li ng-click="mytest()">TestFunction</li>
</ul>
</div>
</div>
</div>
I want an angular diretive to add an inner wrapper to a DOM element. Unfortunately it's not wrapping but replacing the inner part of the element. (see plunker)
So I have this html snippet:
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<label>Name: </label>
<input type="text" ng-model="name" />
<p>Hello {{name}}</p>
</div>
</body>
The directive should change this into
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<div class="inner-wrapper">
<label>Name: </label>
<input type="text" ng-model="name" />
<p>Hello {{name}}</p>
</div>
</div>
</body>
But what I get is
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<div class="inner-wrapper">
</div>
</div>
</body>
Directive Code:
var app = angular.module('plunker', []);
app.directive('wrappMyContent', function() {
return {
restrict: 'A',
transclude: true,
replace: true,
link: function(scope, element) {
var innerWrapper = angular.element('<div class="inner-wrapper" ng-transclude></div>');
element.prepend(innerWrapper);
}
}
});
How can I fix that?
You've mixed up ng-transclude and custom transclude by link:
1. Use template of directive (demo):
var app = angular.module('plunker', []);
//Recommended angular-way
app.directive('wrappMyContent', function() {
return {
restrict: 'A',
transclude: true,
template:'<div class="inner-wrapper" ng-transclude></div>',
link: function(scope, element) {
}
}
});
2. Do transclude by custom link (demo) :
var app = angular.module('plunker', []);
//Equals transclude by your self
app.directive('wrappMyContent', function($compile) {
return {
restrict: 'A',
scope:true,
link: function(scope, element) {
var innerContent = element.html();
var innerWrapper = angular.element('<div class="inner-wrapper"></div>').append(innerContent);
//Do compile work here.
$compile(innerWrapper)(scope.$parent)
element.empty().append(innerWrapper);
}
}
});
Use a template for your '<div class="inner-wrapper" ng-transclude>' part instead of just making an element and prepending it... the ng-transclude directive won't be processed unless it's compiled which the template will be.
I want to append, as a sibling element, the contents of a template file using an attribute directive on an Input Text field.
I've tried this, but the contents of the template are being wrapped inside of <input></input> tags and this is not the desired behavior. I need to put the content of template file as a sibling of the input text. Anyway, angular code is executed without error on the template file.
I tried with Transclude but without success.
HTML
main page
<input type="text" ng-model="myModel" name="inputName" ng-my-directive>
template.html
<div>
<div ng-repeat="row in rows">
<button ng-repeat="button in row">{{button}}</button>
</div>
</div>
JS
.directive('ngMyDirective', function ($compile) {
return {
require: '?ngModel',
restrict: 'A',
transclude:true,
templateUrl: 'template.html',
controller: ['$scope', function ($scope) {
...
},
link: function (scope, element, attrs, ngModelCtrl, transclude) {
...
element.append(transclude());
}
Currently, I have this (wrong) result:
<input type="text">
<div>
...
</div>
</input>
And I need this result:
<input type="text">
<div>...</div>
<div>...</div>
...
Thanks in advance for your effort!
You could try using element.after() with the template contents:
angular.module('myApp', [])
.directive ('ngMyDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.after('<h3>sibling content</h3>');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="myModel" name="inputName" ng-my-directive>
</div>
The problem with this approach is to append a "template.html" file. In this case, you could fetch the HTML contents in an ajax request. Example:
app.directive('ngMyDirective', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element){
$http.get('template.html')
.then(function(response){
element.after($compile(response.data)(scope));
});
}
});
var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
$scope.click = function(){
alert("asd");
};
});
myApp.directive('testInput',function(){
return {
restrict: 'E',
replace: false,
transclude: false,
template: '<div>asdasdasdasd</div>',
controller: function($scope) {
}
};
});
HTML:
<div ng-app = "myApp" ng-controller = "someController">
<div class = "clickme" ng-click ="click()">
click me
</div>
<div id="container">
</div>
</div>
Without using Jquery is there any good Angular way to append directive(testInput) to #container ?
see below jsfiddle link
http://jsfiddle.net/4L6qbpoy/1/
More Angular approach is to use ngIf/ngShow with some flag in controller:
var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
$scope.click = function() {
$scope.test = true;
};
});
myApp.directive('testInput', function() {
return {
restrict: 'E',
replace: false,
transclude: false,
template: '<div>asdasdasdasd</div>',
controller: function($scope) {}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="someController">
<div class="clickme" ng-click="click()">click me</div>
<div id="container">
<test-input ng-if="test"></test-input>
</div>
</div>
in my app I defined a directive which implement a simple slider with a next/prev/goto methods.
The slider then is within an html snipet managed by another controller.
The problem is that the last slide contains a form, so if the submit is ok than I would like to go to the next slide.
In old javascript I would have passed a callback to the submit method in order to apply that callback.
I made the same thing. Is this the best / angular style way to do it?
Javascript (I omitted some detail):
.directive("sfCarousel", function() {
return {
scope: true,
restrict: 'A',
controller: function($scope) {
var slides = $scope.slides = [];
var currentIndex = $scope.currentIndex = -1;
$scope.next = function() {
//mynextfunction...
}
},
link: function(scope, element, attrs) {
console.log("sf-carousel");
}
}
})
.directive("sfCarouselItem", function() {
return {
scope: true,
require: '^sfCarousel',
link: function(scope, element, attrs, sfCarouselController) {
console.log("sf-carousel-item");
sfCarouselController.addSlide(scope);
}
}
})
.controller("mycontroller", ['$scope', function($scope) {
$scope.submit = function (callback) {
//if submit is ok then
callback.apply(null, []);
}
}])
HTML:
<div sf-carousel >
<div sf-carousel-item ng-class="{'active':active}" >
<div>my first slide</div>
<div sf-label="get-started.submit" ng-click="next()" ></div>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<form>
<!--here my form-->
<button type="submit" ng-click="submit(next)">submit and go</button>
</form>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<div>my last slide</div>
<!--other things-->
</div>
</div>
You can pass the function that you what to run on the parent controller.
// directive sfCarousel
return {
transclude: true,
template: '<div class="sf-carousel" ng-transclude></div>',
// ...
};
// directive sfCarouselItem
return {
transclude: true,
scope: {
func: '&',
// ...
},
template: '<div class="sf-carousel-item" ng-transclude></div>',
}
// controller html
<div sf-carousel >
<div sf-carousel-item ng-class="{'active':active}" >
<div>my first slide</div>
<div sf-label="get-started.submit" ng-click="next()" ></div>
</div>
<div sf-carousel-item func="next()" ng-class="{'active':active}" >
<form>
<!--here my form-->
<button type="submit" ng-click="func({})">submit and go</button>
</form>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<div>my last slide</div>
<!--other things-->
</div>
</div>