I am building generic angularjs directive to support editing of json object. I have json data and also admin data to have details about original data. Following code details which I am using to build my generic directive.
Please refer Plunker for running code.
http://plnkr.co/edit/x2lqHjYq48gwxW7oYyEQ?p=preview
Directive Code:
app.directive("objecteditor", [function () {
return {
restrict: "E",
templateUrl: "ObjectEditor.html",
replace: true,
scope: {
object: '=',
objectAdmin: '='
},
link: function (scope, element, attrs) {
//Method to initialize
scope.init = function () {
};
//Call init() to initialze the loading.
scope.init();
}
};
}]);
Directive Template:
<div>
<h4 data-ng-bind-template="{{objectAdmin.displayName}}"></h4>
<div data-ng-repeat="column in objectAdmin.objectDefinition">
<div data-ng-switch="column.type">
<div data-ng-switch-when="string">
<label class="label-plain" data-ng-bind-template="{{column.displayName}}"></label>
<input type="text" data-ng-model="object[objectAdmin.name][column.name]" placeholder="{{displayName}}" title="{{displayName}}" name="textBox{{name}}" required />
</div>
<!--Call same object for child type as object. But how??? If i call <object> directive here then goes into infinite cycle -->
<div data-ng-switch-when="object">
</div>
</div>
</div>
</div>
Controller Code:
var app = angular.module("myApp", []);
app.controller('ApplicationController', ['$scope',
function($scope) {
//Method to initialize
$scope.init = function() {
//Set json data strucutre for editing
$scope.objectAdmin ={"name":"bankinfo","displayName":"Bank Info","type":"object","objectDefinition":[{"name":"name","displayName":"Bank Name","type":"string"},{"name":"mainPhone","displayName":"Main Phone","type":"string"},{"name":"contact","displayName":"Contact","type":"object","objectDefinition":[{"name":"name","displayName":"Name","type":"string"},{"name":"title","displayName":"Title","type":"string"}]}]};
$scope.object={"bankinfo":{"name":"Chase Bank - Newburgh","mainPhone":"1 (845) 333-3333","contact":{"name":"Donna Shuler","title":"Commercial Accounts Mgr."}}};
};
//Call init() to initialze the loading.
$scope.init();
}
]);
Index.html
<!doctype html>
<html ng-app='myApp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
<script src="ObjectEditor.js"></script>
</head>
<body data-ng-controller="ApplicationController">
<h2>How to call same directive within itself?</h2>
<!--Use object editor directive to edit the object details -->
<objecteditor data-object="object" data-object-admin="objectAdmin"></objecteditor>
</body>
</html>
I want to make my directive generic so that same type of object editing can be supported by single directive.
When I tried to call same directive within itself then it fall into infinite loop (which is expected).
How can I achieve this functionality in directive?
Please help.
I was going through the recursive directive and came across following post which was helpful to implement my requirement.
https://www.packtpub.com/books/content/recursive-directives. Following is code to implement this.
Object Editor Directive Template:
<div>
<objecttree data-object="object" data-object-admin="objectAdmin" data-folder-guid="folderGuid" data-hide-header="'true'"></objecttree>
<script type="text/ng-template" id="objectTree">
<div class="clear-left">
<h4 data-ng-if="!hideHeader" data-ng-bind-template="{{objectAdmin.displayName}}"></h4>
<div data-ng-repeat="column in objectAdmin.objectDefinition">
<div data-ng-switch="column.type">
<imageeditor data-ng-switch-when="image" data-image="object[column.name]" data-folder-guid="folderGuid" data-column="column"></imageeditor>
<formcheckbox data-ng-switch-when="boolean" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayName" data-formName="'resourceAddEditFormName'"></formcheckbox>
<addresseditor data-ng-switch-when="address" data-address="object[column.name]" data-column="column" data-collection-admin="objectAdmin"></addresseditor>
<formtextbox data-ng-switch-when="string" data-ng-if="!column.isDropdown" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayName" data-formName="'resourceAddEditFormName'"></formtextbox>
<dropdownbox data-ng-switch-when="string" data-ng-if="column.isDropdown" class="admin-textbox" data-selected-id-list="object[column.name]" data-dropdown="column" data-multiple="column.dropdownTypeMultiple"></dropdownbox>
<div data-ng-switch-when="object">
<hr/>
<objecttree data-object="object[column.name]" data-object-admin="column" data-folder-guid="folderGuid" data-hide-header="'true'"></objecttree>
</div>
<div data-ng-switch-when="array">
<hr/>
<arrayobjecttree data-objects="object[column.name]" data-objects-admin="column" data-folder-guid="folderGuid" data-hide-header="'true'"></arrayobjecttree>
</div>
</div>
</div>
</div>
</script>
</div>
Object Tree:
app.directive("objecttree", ['$compile', '$templateCache', function ($compile, $templateCache) {
return {
restrict: "E",
scope: {
object: '=',
objectAdmin: '=',
folderGuid: '=',
hideHeader: '='
},
link: function (scope, element, attrs) {
element.replaceWith(
$compile(
$templateCache.get('objectTree')
)(scope)
);
}
};
}]);
This is Shankar. You can use the below solution for recursive directive.
Please confirm me whether this resolves your issue.If not, you can let me know.
As I'm not able to paste my entire code here, you can find the solution in my Github repository:(i.e. gmssankar/myRepository/Recursive Directive)
https://github.com/gmssankar/myRepository/blob/master/Recursive%20Directive
The code can be found in the following link too in plunker:
plnkr.co/edit/WrZekRS5AzfFJhQ2d3XK?p=preview
I'm not able to attach the complete code here as it restricts the number of lines. The logic is: Inside Directive template display bank name, main phone,contact name and contact title from the passed object. Then check if the passed object, has object definition (i.e child nodes). If yes, then extract each child using ng-repeat , and pass to same directive. Issue gets resolved here. From Github or plnkr , you can access the complete code.
Related
In this plnkr :
https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview
I'm attempting to prevent a custom directive being invoked by the use of ng-show. But if check console output when the directive is invoked 4 times : console.log('invoked') But ng-show shows/hides html elements it does not control what is rendered within the custom directive itself.
Is there a mechanism to pass the ng-show to the custom directive and if it's false then do call the directive ? I think could pass a new variable to the directive which contains same value as ng-show and then wrap the body of the directive in a conditional ?
src :
goob.html :
goob
http-hello2.html:
2. http-hello2.html
index.html :
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="FetchCtrl">
<label>Filter: <input ng-model="search"></label>
<div ng-show="false">
<div ng-repeat="sourceUrl in sourceUrls | filter:search track by $index ">
<status-viewer url="sourceUrl"> </status-viewer>
</div>
</div>
</div>
</body>
</html>
mytemplate.html :
<!--<h1>{{url}}</h1>-->
<div>
<p>{{model}}</p>
</div>
script.js :
var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl)
myapp.directive('statusViewer', function ($http , $interval) {
return {
restrict: 'E',
templateUrl: 'mytemplate.html',
scope: {
url: '='
},
link: function (scope, elem, attrs, ctrl) {
console.log('invoked')
scope.isFinishedLoading = false;
$http.get(scope.url).success(function (data) {
scope.model = data;
});
}
};
});
function FetchCtrl($scope, $http, $q , $parse) {
$scope.sourceUrls = [
'http-hello2.html'
,'http-hello2.html'
,'test.html'
,'goob.html'];
}
test.html :
test
Instead of ng-show you should use ng-if directive to avoid directive linking before show
Forked plunker example
I am trying to call a controller from directive....Here is the code which i am writing
penApp.directive('enpo', function() {
return {
restrict: 'E',
scope: {
info: '=',
dragEvent: '&dragParent'
},
templateUrl: 'enpo.html',
link: function(scope, element, attrs){
var circleDiv = element.find(".circle")
element.droppable({
})
element.draggable({
handle: ".circle",
drag: function( event, ui ) {
scope.dragEvent();
}
});
var eDiv = element.find(".temp")
$(eDiv).draggable({revert: true});
}
};
})
and this is the code for .html file
<div class="row ">
<div id="n_div" class="col-xs-12 dd_area">
<end-point drag-parent="drawLine()" ng-repeat="info in stageObjectArray" info="info"></end-point>
</div>
</div>
and this is the function i have written in controller
$scope.drawLine = function(){
console.log("Called thsssssse function")
}
I am not able to figure out what is going wrong here...can anyone please guide...the controller function is not getting called
Can you please be a little clearer what each piece of code is?
Hope this will help you out:
Looks to me like you have created a directive with a link function and an html template.
From the HTML template you are trying to call the function in a controller that you have written, however I do not see that you are attaching the controller to the HTML, where you want to use it.
Try adding ng-controller="MyController" (MyController being the name of your controller which contains the $scope.drawline function) to your HTML, as follows:
<div class="row ">
<div id="n_div" class="col-xs-12 dd_area" ng-controller="MyController">
<end-point drag-parent="drawLine()" ng-repeat="info in stageObjectArray" info="info"></end-point>
</div>
</div>
BTW, I don't see where you are actually using your 'enpo' directive in your HTML. I am assuming that you are in fact calling it, but omitted that part of the code here.
I ran into a problem with AngularJS concerning directives and ng-model.
Assume the following example:
Within my HTML file:
<div ng-controller="MyCtrl">
<div ng-repeat="item in data">
<directive-item data="item"/>
</div>
<div>
<span>This is some input: {{ myinput }} </span>
</div>
</div>
...
My app.js looks like this (stripped for readability):
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.data = [
{ value: 'something' }
];
}]);
app.directive('directiveItem', function($compile) {
var template = '<div>'
+ '<label for="myinput">{{ data.value }}</label>'
+ '<input type="text" ng-model="myinput" />'
+ '</div>';
var linker = function(scope, element, attrs) {
element.html(template).show();
$compile(element.contents())(scope);
};
return {
restrict: 'E',
link: linker,
scope: {
data: '='
}
};
});
Maybe you can see my problem.
Everything works fine, except the display of {{ myinput }} outside of my directive.
It works perfect, if I display it within the injected template, but not outside of it. I did a LOT of google-research, but didn't find anything to help me out.
To clear some things out in front: $scope.data contains multiple objects with different data sets in my real application. So please look at this only as a quick example.
Also I do inject some more templates from my directive depending on a given $scope.data.object.type. The given code is only a rough example of what I have. As mentioned, everything else works without flaws.
Anyone here got an idea?
Regards!
€dit:
#Zeeshan did come up with a good way. Not yet 100% what I am looking for, but it pushes my thinking in another direction.
If anyone has the perfect solution, I am free for ideas! Thanks!
Angular Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app. I have tried a few cases to build understanding, with object (reference | alias behavior), with plain string. Following snippet simulates:
(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.data = [{ value: 'something' }];
$scope.bar = {value:'barInitValueAsObject'};
$scope.tar = 'tarInitValueAsNonObject';
}])
.directive('oneItem', function($compile) {
return {
restrict: 'E',
scope: {
foo: '=',
bar:'=',
tar:'=',
},
template: '<div><label for="bar">{{ foo }} : </label> <input type="text" ng-model="bar.value" /></div>'
+ '<div><label for="bar">{{ foo }}</label> : <input type="text" ng-model="tar" /></div>'
}
})
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example15-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="item in data">
<one-item foo="item.value" bar="bar" tar="tar"></one-item>
</div>
<div>
<br><br>
<span>This is bar # Parent : {{ bar.value }} </span>
<br><br>
<span>This is tar # Parent : {{ tar }} </span>
</div>
</div>
</body>
</html>
Plnkr here
Happy Helping!
You can use another two-way binding in the directive's isolate scope. You already are passing in the data variable, so just add another variable to the scope that will bind with your myInput. Since this is a two-way binding, updating the value in one way will update the value elsewhere too. You'll probably just want to let the directive (and its HTML input) handle the input.
...
return {
restrict: 'E',
link: linker,
scope: {
data: '=',
myInput: '='
}
Finally, your scopes are not lining up properly because of your ng-repeat. It's not clear whether you want your display within the ng-repeat or not, so I just put the display also within the ng-repeat. In your controller's HTML:
<div ng-repeat="item in data">
<directive-item data="item" my-input="myInput"></directive-item>
<span>This is some input: {{ myinput }} </span>
</div>
<div>
</div>
Check out this plunker.
Here is my Plunker:
http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt
When the button is clicked, the following should be inserted before the "Hello World!" span:
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
minus the script tags, of course.
I achieve this by dynamically inserting the following div:
<div ng-include="tempTest"></div>
And then compiling it. However, if you look at the log, the only thing that is left after the compilation is this:
<!-- ngInclude: tempTest -->
What is going on here? Why isn't my insert properly compiling? the logic is as follows:
$scope.insert = function(){
// Create elements //
var container = angular.element('<div id="compiled-container"></div>');
var element = angular.element('<div ng-include="tempTest"></div>');
//Insert parent Container
$('#greeting').before(container);
// insert the element
$animate.enter(element, container);
// test insertion
console.log("Before Compile: " +container.html() )
$compile(element);
//look again after compile
console.log("After Compile: " +container.html() )
};
The quick answer might have been:
<div ng-include="'tempTest'"></div>
Probably you just forgot the single quotes to reference the template.
The long answer:
It is not advised to access the DOM inside a controller - you will get in trouble as the code will be flooded with $scope.$apply() calls. Think about implementing this feature with a directive. I tried to create a starting point from your code here
http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3
var app = angular.module('plunker', ['ngAnimate']);
app.directive('greeting', function($compile){
return {
restrict: 'E',
scope: {
name: '='
},
template: '<div>'+
' <span>Hello {{name}}!</span>'+
' <button ng-click="insert()">test</button>'+
'</div>',
link: function(scope, element, attrs) {
scope.insert = function() {
var container = angular.element('<div ng-include="\'tempTest.html\'"></div>');
element.before($compile(container)(scope));
}
}
}
})
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<greeting name="name"></greeting>
The template elements are inserted before the Hello World! textnode everytime the button is clicked.
Side note You dont even need the scope{ name: '='} as the directive will inherit its surrounding scope, but its the cleaner way to pass (actually bind) controller variables to a directive explicitly.
<div ng-include src="tempTest"></div>
This should work
^^^ note that this will NOT even begin to work unless single quotes are added (as #JHixson has already pointed out), like so:
<div ng-include src="'tempTest'"></div>
Simply your script :
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
Must be inside the MainCtrl controller selector like this :
<div ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span>
</div>
</script>
</div>
I think it should be easy to use the well known angular attributes on a directive out of the box.
For example if the name of my directive is myDirective I would like to use it this way:
<div ng-controller="myController">
<my-directive ng-click="doSomething()"><my-directive>
</div>
instead of needing to define a custom click attribute (onClick) as in the example below
<div ng-controller="myController">
<my-directive on-click="doSomething()"><my-directive>
</div>
It seems that ng-click can work, but then you need to specify ng-controller on the directive tag too which I don't want. I want to define the controller on a surrounding div
Is it possible to use ng-click on a directive together with a controller defined on a parent html element?
Here is updated code. Maybe is this what you were looking for.
Html:
<div data-ng-app="myApp">
<div data-ng-controller="MyController">
<my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
<my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
</div>
</div>
Angular:
var app = angular.module('myApp', []);
app.directive('myDirective', function(){
return {
restrict: 'EA',
replace: true,
scope: {
eventHandler: '&ngClick'
},
template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
};
});
app.controller('MyController', ['$scope', function($scope) {
$scope.myFirstFunction = function(msg) {
alert(msg + '!!! first function call!');
};
$scope.mySecondFunction = function(msg) {
alert(msg + '!!! second function call!');
};
}]);
Edit
Check solution that I made in jsFiddler is that what you were looking for?
http://jsfiddle.net/migontech/3QRDt/1/