Hi,
Following the example provided by Thomas Burleson
(http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/),
I have got a page that worked. I now want to include a custom directive
(which I found off the web) and I want to register this in a separate
module. Here is the directive:-
(function() {
"use strict";
var app = angular.module("cpl.directives");
var BlurFocusDirective = function () {
return {
restrict: "E",
require: "?ngModel",
link: function (scope, elm, attr, ctrl) {
if (!ctrl) {
return;
}
elm.on("focus", function () {
elm.addClass("has-focus");
scope.$apply(function () {
ctrl.hasFocus = true;
});
});
elm.on("blur", function () {
elm.removeClass("has-focus");
elm.addClass("has-visited");
scope.$apply(function () {
ctrl.hasFocus = false;
ctrl.hasVisited = true;
});
});
elm.closest("form").on("submit", function () {
elm.addClass("has-visited");
scope.$apply(function () {
ctrl.hasFocus = false;
ctrl.hasVisited = true;
});
});
}
};
};
app.directive("input", BlurFocusDirective)
.directive("select", BlurFocusDirective);
})();
And here is the App:-
(function(define) {
"use strict";
var dependencies = [
"properties/controllers/CplController"
];
define(dependencies, function(CplController) {
var appName = "cplApp";
var cplApp = angular.module(appName, [
"ngCookies",
"ngResource",
"ngSanitize",
"ngRoute",
"ui.bootstrap",
"cpl.directives"
])
.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/main.html",
controller: "CplController"
})
.otherwise({
redirectTo: "/"
});
})
.controller("CplController", CplController);
angular.bootstrap(document.getElementsByTagName("body")[0], [
appName ]);
return cplApp;
});
})(define);
Finally, here is my require specification:-
require.config ({
appDir : '',
baseUrl : 'scripts'
});
require([ "common/directives/BlurFocusDirective" ], function (app)
{ });
require( [ "PropertyApp" ], function (app) {
});
Now, with all of this place, I get the following error:-
Error: [$injector:modulerr] Failed to instantiate module cplApp due to:
[$injector:modulerr] Failed to instantiate module cpl.directives due to:
[$injector:nomod] Module 'cpl.directives' is not available! You either
misspelled the module name or forgot to load it. If registering a module
ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.6/$injector/nomod?p0=cpl.directives
minErr/<@http://127.0.0.1:9000/bower_components/angular/angular.js:78
module/<@http://127.0.0.1:9000/bower_components/angular/angular.js:1528
ensure@http://127.0.0.1:9000/bower_components/angular/angular.js:1451
module@http://127.0.0.1:9000/bower_components/angular/angular.js:1524
loadModules/<@http://127.0.0.1:9000/bower_components/angular/angular.js:3614
forEach@http://127.0.0.1:9000/bower_components/angular/angular.js:302
loadModules@http://127.0.0.1:9000/bower_components/angular/angular.js:3608
loadModules/<@http://127.0.0.1:9000/bower_components/angular/angular.js:36
The directive is downloading, but it doesn't seem to be running. I think I
have messed up the require js call.
I guess my question is how should I use requirejs and angular modules and
directives, like the one above?
Thanks.
Kamal.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
