how to dynamically append directive to div in angularjs - javascript

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>

Related

ng-click not working within directive

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>

How to avoid rendering directive element

Is it possible to hide my directive html element?
I mean if I have this directive:
app.js
angular.module("myApp", [])
.directive("myDirective", function() {
return {
restrict: "E",
template: "<div><p>Some text...</p></div>"
}
);
Only render the content of the template.
<div>
<p>Some text...</p>
</div>
Not the directives element:
<my-directive>
<div>
<p>Some text...</p>
</div>
</my-directive>
yes just put the replace: true in the directive. it will remove the element
angular.module("myApp", [])
.directive("myDirective", function() {
return {
restrict: "E",
template: "<div><p>Some text...</p></div>",
replace: true
}
);
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
}).directive("myDirective", function() {
return {
restrict: "E",
template: "<div><p>Some text...</p></div>",
replace : true
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<my-directive>
</my-directive>
</div>
Note that replace: true is marked as deprecated (I use it myself nonetheless from time to time)
See: Explain replace=true in Angular Directives (Deprecated)

How to add an inner wrapper to an element in angular?

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.

How to include custom directive to another custom directive's template(html) in angular js

I hava a directive already(appView) and that has some html to load through templateUrl. As of now, I need to add one more custom directive to the template that is being used by another directive(appView).
Please see my code below and it is not working as expected. Any help on this how i can make this work please?
View.html (template)
<div>
<div class="dragdrop" id="dropzone" dropzone> //here is my custom directive
<div class="fileUpload btn btn-primary">
<span>UPLOAD ASSETS</span>
<input id="dzFile" type="file" class="upload" />
</div>
</div>
</div>
angular js
var appModule = angular.module("Newapp", []);
appModule.directive("appView", appView);
function appView(){
var directive = {
restrict: 'E',
templateUrl: 'app/View.html'
};
return directive;
}
appModule.directive("dropzone", function(){ //This is added to the View.html as attribute(see above html code with **)
var directive = {
restrict: 'A',
link: FullDragDrop
};
return directive;
});
function FullDragDrop(){
console.log("soemthing goes here");
}
How can I make this possible Please?
This code works for me.
Make sure templateUrl: 'app/View.html' exists
<script>
var appModule = angular.module("Newapp", []);
appModule.directive("appView", appView);
function appView(){
var directive = {
restrict: 'E',
templateUrl: 'view.html'
};
return directive;
}
appModule.directive("dropzone", function(){ //This is added to the View.html as attribute(see above html code with **)
var directive = {
restrict: 'A',
link: FullDragDrop
};
return directive;
});
function FullDragDrop(){
console.log("soemthing goes here");
}
</script>
<script type="text/ng-template" id="view.html">
<div class="dragdrop" id="dropzone" dropzone> //here is my custom directive
<div class="fileUpload btn btn-primary">
<span>UPLOAD ASSETS</span>
<input id="dzFile" type="file" class="upload" />
</div>
</div>
</script>
<body>
<app-view></app-view>
</body>

angular: calling/triigering directive method from parent scope

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>

Categories