From 0907b1dd4939935e3284d7caccdd79070edd39b7 Mon Sep 17 00:00:00 2001 From: nartawak Date: Thu, 16 Oct 2014 19:38:53 +0200 Subject: [PATCH] sample directive --- bower.json | 3 - public/index.html | 55 ++++++++------ public/js/controllers/HomeCtrl.js | 70 +++++++----------- .../js/k33g.components/my-title/my-title.html | 5 +- .../js/k33g.components/my-title/my-title.js | 73 +++++-------------- 5 files changed, 85 insertions(+), 121 deletions(-) diff --git a/bower.json b/bower.json index d4cee38..f17c269 100644 --- a/bower.json +++ b/bower.json @@ -3,8 +3,5 @@ "version": "0.0.0", "dependencies": { "angular": "~1.3.0" - }, - "resolutions": { - "angular": "~1.3.0" } } diff --git a/public/index.html b/public/index.html index fc74ddd..b2119ca 100644 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,48 @@ - - - - - + + + + + -
+ +
- + + +
+
-
+ +
+ - + + - - + + - - + + - - - - + \ No newline at end of file diff --git a/public/js/controllers/HomeCtrl.js b/public/js/controllers/HomeCtrl.js index fff4520..3cbf465 100644 --- a/public/js/controllers/HomeCtrl.js +++ b/public/js/controllers/HomeCtrl.js @@ -1,46 +1,32 @@ (function () { - var HomeCtrl = function ($rootScope, myLittleSharedServices) { - - //myLittleSharedServices.setColor("green"); - - $rootScope.$on('my-title-ready', function(event, data) { - - console.log('my-title-ready', data) - - if (data.id=="english") { - $rootScope.$broadcast('set-text', { - id:"english", message:"Hello world!" - }); - } - - if (data.id=="french") { - $rootScope.$broadcast('set-text', { - id:"french", message:"Salut tout le monde!" - }); - } - - if (data.id=="german") { - $rootScope.$broadcast('set-text', { - id:"german", message:"Morgen!" - }); - } - - if (data.id=="klingon") { - $rootScope.$broadcast('set-color', { - id:"klingon", color:"orange" - }); - } - - }); - - }; - - HomeCtrl.$inject = ["$rootScope"]; - - angular.module("mainApp").controller("HomeCtrl", HomeCtrl); - - //console.log("angular.module('mainApp')", angular.module("mainApp")) - //console.log("angular.module('my.components')", angular.module("my.components")) + /** + * Home controller + * @constructor + */ + var HomeCtrl = function ($scope) { + + /** + * Model object for english title + * @type {{title: string, color: string}} + */ + $scope.englishModel = { + title : 'My english title', + color : 'red' + }; + + /** + * Model object for german title + * @type {{title: string, color: string}} + */ + $scope.germanModel = { + title : 'My german title', + color : 'green' + } + }; + + HomeCtrl.$inject = ["$scope"]; + + angular.module("mainApp").controller("HomeCtrl", HomeCtrl); }()); \ No newline at end of file diff --git a/public/js/k33g.components/my-title/my-title.html b/public/js/k33g.components/my-title/my-title.html index c5e6376..d2c9dfa 100644 --- a/public/js/k33g.components/my-title/my-title.html +++ b/public/js/k33g.components/my-title/my-title.html @@ -1 +1,4 @@ -

{{title}}

\ No newline at end of file +

+ {{title}} +

\ No newline at end of file diff --git a/public/js/k33g.components/my-title/my-title.js b/public/js/k33g.components/my-title/my-title.js index 0b89504..bf848bd 100644 --- a/public/js/k33g.components/my-title/my-title.js +++ b/public/js/k33g.components/my-title/my-title.js @@ -1,58 +1,23 @@ (function (ng) { - var scripts = document.getElementsByTagName("script"); - var templateUrl = scripts[scripts.length-1].src.replace(".js", ".html"); - - var myTitle = function($rootScope) { - return { - restrict: 'E', - templateUrl: templateUrl, - link: function(scope, element){ - - //scope.self = element[0]; - - scope.setText = function(message) { - scope.title = message; - }; - - scope.setColor = function(color) { - angular.element(element[0].querySelector("h1")).css("color", color); - }; - - scope.setText(scope.default); - scope.setColor(scope.color); - - $rootScope.$broadcast('my-title-ready', {id: scope.id}); - }, - controller: "myTitleCtrl", - scope:{ - id: "@id", default : "@default", color : "@color" - } - } - - }; - - var myTitleCtrl = function($scope, $rootScope) { - - $rootScope.$on('set-text', function(event, data) { - if(data.id == $scope.id) { - $scope.setText(data.message); - } - }); - - $rootScope.$on('set-color', function(event, data) { - if(data.id == $scope.id) { - $scope.setColor(data.color); - } - }); - - }; - - myTitle.$inject = ["$rootScope"]; - myTitleCtrl.$inject = ["$scope", "$rootScope"]; - - ng.module("k33g.components") - .directive("myTitle", myTitle) - .controller("myTitleCtrl", myTitleCtrl); +// TODO : get your the template with $templateCache +// or if yu want to write an HTML file use for exemple grunt with grunt plugin html2js + var scripts = document.getElementsByTagName("script"); + var templateUrl = scripts[scripts.length - 1].src.replace(".js", ".html"); + + var myTitle = function () { + return { + restrict: 'EA', + templateUrl: templateUrl, + replace : true, + scope: { + title: "=", + color: "=" + } + } + }; + myTitle.$inject = []; + + ng.module("k33g.components").directive("myTitle", myTitle); })(angular); \ No newline at end of file