AngularJS Multiple Directives Sharing Model

Developer
Ben Babics
Size
3,248 Kb
Views
12,144
  1. AngularJS Multiple Directives Sharing Model Previews
  2. AngularJS Multiple Directives Sharing Model HTML Codes
  3. AngularJS Multiple Directives Sharing Model CSS Codes
  4. AngularJS Multiple Directives Sharing Model JS Codes

How do I make an angularjs multiple directives sharing model?

What is a angularjs multiple directives sharing model? How do you make a angularjs multiple directives sharing model? This script and codes were developed by Ben Babics on 01 October 2022, Saturday.

AngularJS Multiple Directives Sharing Model Previews
IQ Test

AngularJS Multiple Directives Sharing Model - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Multiple Directives Sharing Model</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" ng-controller="AppController"> <nav-items items=items>{{ $index }}) {{ item.name }}</nav-items> <ul> <li ng-repeat="item in items"> <nav-item item=item>{{ item.name }} #{{ $index }}</nav-item> </li> </ul> <render-item></render-item>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js'></script>
<script src='https://codepen.io/benbabics/pen/ygeJt.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Multiple Directives Sharing Model - Script Codes CSS Codes

a { display: block;
}
a.active { background-color: yellow;
}

AngularJS Multiple Directives Sharing Model - Script Codes JS Codes

console.clear();
var app = angular.module('app', []);
app.value('ActivityService', { items: [ { name: 'Foo', content: 'Content for "Foo"' }, { name: 'Bar', content: 'Content for "Bar"' }, { name: 'Baz', content: 'Content for "Baz"' } ]
});
app.controller('AppController', BaseController.extend({ inject: ['ActivityService'], defineScope: function($scope) { $scope.items = this.ActivityService.items; }
}));
app.factory('ItemModel', function($q) { var item, deferred = $q.defer(); function setItem(value) { item = value; deferred.notify(item); } function getItem() { return item; } function addListener(observer) { var fn = angular.noop; deferred.promise.then(fn, fn, observer); // notify listeners late to the party if (getItem()) { deferred.notify(item); } } return { set : setItem, get : getItem, listen: addListener };
});
app.controller('NavItemController', BaseController.extend({inject: ['ItemModel'], initialize: function($scope) { if (!this.ItemModel.get()) { this.ItemModel.set($scope.item); } }, defineListeners: function($scope) { this.ItemModel.listen(function(item) { $scope.isActive = item === $scope.item; }); }, /* * Event Handlers */ handleItemSelection: function(item) { this.ItemModel.set(item); }
}));
app.controller('RenderItemController', BaseController.extend({ inject: ['ItemModel'], defineListeners: function($scope) { this.ItemModel.listen(function(item) { $scope.item = item; }); }
}));
app.directive('navItems', function($compile) { return { restrict: 'E', transclude: true, scope: { items: '=' }, link: function(scope, el, attrs, ctrl, transcludeFn) { var $list = angular.element('<ul></ul>'); angular.forEach(scope.items, function(item) { var child_scope = scope.$new(); child_scope.item = item; transcludeFn(child_scope, function(clone, innerScope) { var $item, tmpl = '<li><nav-item item=item>'+ clone.html() +'</nav-item></li>'; $item = $compile(tmpl)(child_scope); $list.append($item); }); }); // mimic replace:true el.before($list).remove(); } };
});
app.directive('navItem', function() { return { restrict: 'E', replace: true, transclude: true, scope: { item: '=' }, controller: 'NavItemController', template: '<a href="#" ng-class="{active:isActive}" ng-click=handleItemSelection(item)><span ng-show=item.title>{{ item.title }}</span><span ng-hide=item.title ng-transclude></span></a>', link: (function() { var index = 0; return function(scope, el, attrs, ctrl, transcludeFn) { var child_scope = scope.$new(), has_index = scope.item && !scope.item.title, items = scope.$parent.items, last_item = items[items.length - 1]; transcludeFn(child_scope, function(clone, innerScope) { if (!has_index) return; innerScope['$index'] = ++index; console.log('clone', clone.html()); el.html(clone); console.log('el', el.html()); }); // reset the index at the end of the transclusion loop if (scope.item === last_item) { index = 0; } } })() };
});
app.directive('renderItem', function($rootScope) { return { restrict: 'E', replace: true, template: '<h1>Render Item: {{ item.content }}</h1>', controller: 'RenderItemController' };
});
app.config(function($provide) { var ActivityServiceDecorator = function($delegate) { var items = $delegate.items; items.unshift({ title: 'Overview', content: 'Content for "Overview"' }); items.push({ title: 'Submit for Grading', content: 'Content for "Submit for Grading"' }); return { items: items }; }; $provide.decorator('ActivityService', ActivityServiceDecorator);
});
angular.bootstrap(document.getElementById('app'), ['app']);
AngularJS Multiple Directives Sharing Model - Script Codes
AngularJS Multiple Directives Sharing Model - Script Codes
Home Page Home
Developer Ben Babics
Username benbabics
Uploaded October 01, 2022
Rating 3
Size 3,248 Kb
Views 12,144
Do you need developer help for AngularJS Multiple Directives Sharing Model?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ben Babics (benbabics) Script Codes
Name
AngularJS Directive - Accordion
Angular responsive table directive
Truncate text
Angular Directive Scope
A Pen by Ben Babics
Quikly Network UI Layout
AngularJS extend Base Controller
LabNetwork Form Validation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!