{"id":402,"date":"2016-07-26T17:33:17","date_gmt":"2016-07-26T16:33:17","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=402"},"modified":"2022-07-25T08:35:46","modified_gmt":"2022-07-25T07:35:46","slug":"angularjs-v1-components-dynamic-directives","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/angularjs-v1-components-dynamic-directives\/","title":{"rendered":"AngularJS (v1) &#8211; components (dynamic directives)"},"content":{"rendered":"<pre lang=\"javascript\" title=\"services\/componentService.js\">\r\n(function () {\r\n    'use strict';\r\n\r\n    angular\r\n    .module('app.services')\r\n    .factory('componentService', ['$http', '$q', '$controller', '$compile', '$rootScope',\r\n    function ($http, $q, $controller, $compile, $rootScope) {\r\n        var exports = {};\r\n\r\n        exports.newFromUrl = function(controllerFn, templateUrl) {\r\n            var defer = $q.defer();\r\n            $http.get(templateUrl).then(function(result) {\r\n                var template = result.data;\r\n                var el = exports.new(controllerFn, template);\r\n                defer.resolve(el);\r\n            }, defer.reject);\r\n            return defer.promise;\r\n        };\r\n\r\n        exports.new = function(controllerFn, templateStr) {\r\n            var scope = $rootScope.$new(); \/\/ Create new scope, inherit from rootscope\r\n            var controller = $controller(controllerFn, { $scope: scope }); \/\/ create new controller, inject our $scope\r\n            var linkFn = $compile(templateStr); \/\/ compile the template\r\n            var content = linkFn(scope); \/\/ apply the scope to the template, the scope is set\/controlled by the controller\r\n            return content; \/\/ result: a HTMLElement, with our scope applied\r\n        };\r\n\r\n        \/\/example\r\n        exports.example = function() {            \r\n            exports.newFromUrl(['$scope','$rootScope', function($scope, $rootScope) {\r\n                $scope.title = 'hoi';\r\n            }], 'app\/directives\/directive\/directive.html')\r\n            .then(function(result) {\r\n                var el = result;\r\n                var parent = document.getElementById('componentParent');\r\n                parent.appendChild(el[0]);\r\n            });\r\n        };\r\n\r\n        return exports;\r\n    }]);\r\n}());\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>(function () { &#8216;use strict&#8217;; angular .module(&#8216;app.services&#8217;) .factory(&#8216;componentService&#8217;, [&#8216;$http&#8217;, &#8216;$q&#8217;, &#8216;$controller&#8217;, &#8216;$compile&#8217;, &#8216;$rootScope&#8217;, function ($http, $q, $controller, $compile, $rootScope) { var exports = {}; exports.newFromUrl = function(controllerFn, templateUrl) { var defer = $q.defer(); $http.get(templateUrl).then(function(result) { var template = result.data; var el = exports.new(controllerFn, template); defer.resolve(el); }, defer.reject); return defer.promise; }; exports.new = function(controllerFn, templateStr) { [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"predecessor-version":[{"id":404,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/402\/revisions\/404"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}