سلام.
ng-hello-directive در فایل app/helloDirective.js به این صورت تعریف شده است:
و در نهایت حالت sate3 را با آدرس state3/ در app.js تعریف کنید:
همانطور که میبینید یک ماژول جدید تعریف شده و دایرکتیو در آن ثبت شده است. برای استفاده از چنین دایرکتیوی باید ماژول ِ دایرکتیو را به وابستگیهای ماژول خودتان اضافه کنید:
در این حالت حتما باید فایل دایرکتیو را پیش از فایل app خود بارگذاری کرده باشید. یا اینکه تعریف دایرکتیو را تغییر دهید و بجای تعریف ماژول جدید، آن را به همان ماژول خودتان اضافه کنید. یعنی تعریف دایرکتیو را به این شکل تغییر دهید:
حالا این دایرکتیو را هم میتوانید تنبلانه! بارگذاری کنید.
یک لینک به index.html اضافه کنید:
<div style="direction: rtl"> <a href="#/state1">حالت 1</a> | <a href="#/state2">حالت 2</a> | <a href="#/state3">حالت 3</a> <div ui-view style="font-weight:bold; text-align:center;"></div> </div>
فرض کنید محتویات مورد نظر برای این حالت که در فایل app/state3.html قرار دارد، شامل یک دایرکتیو است:
state3.html:
تگ زیر یک دایرکتیو دارد: <br/> <div ng-hello-directive></div>
angular.module('app').lazy.directive('ngHelloDirective', function () { return function (scope, elem, attr) { elem.html('سلام دایرکتیو تنبل!'); }; });
.state('state3', { url: '/state3', templateUrl: 'app/state3.html', resolve: { fileDeps: ['$q', '$rootScope', function ($q, $rootScope) { var deferred = $q.defer(); var deps = ['app/helloDirective.js']; $script(deps, function () { $rootScope.$apply(function () { deferred.resolve(); }); }); return deferred.promise; }] } });
دقت کنید که در این حالت، این دایرکتیو تنها در ماژولی با نام app که خصوصیتی به نام lazy به صورت توضیح داده شده دارد ثبت میشود.
اگر تابحال دایرکتیو آمادهای را دریافت کرده باشید، دیدهاید که این دایرکتیوها به این صورت تعریف میشوند:
angular.module('moduleOfDirective', []).directive('ngDirectiveName', ...
app = angular.module("app", ['ui.router', 'moduleOfDirective']);
angular.module('app', []).lazy.directive('ngDirectiveName', ...