angularjs-directive

I have this factory, .factory('authentication', [function() { return { loginRequired: false }; }]); I have this controller, .controller('TopNavCtrl', ['$scope', 'authentication', function($scope, authentication) { $scope.login = function() { authentication.loginRequired = true; }; }]); and I have this link function in a directive, link: function(scope, element, attrs) { scope.show = false; scope.$watch(authentication.loginRequired, function(value) { scope.show = value; }); } When authentication.loginRequired = true; is done in the controller, the scope.$watch in the directive isn't called. Any

i'm trying to pass data from AngularJS to ASP.net MVC and is always getting null. Here's my code (only posting the essential, button, controller and c#: HTML: <a class="btn btn-grey btn-lg btn-block" ng-click="AddCar()">Save</a> Controller $scope.AddCar = function () { $http.post("Cars/AddCar", JSON.stringify($scope.new.JsonCar)).success(function (data) { Alert(ok) }) c# public string AddCar(string JsonCar) { try .... } In JSON.stringify($scope.new.JsonCar) i'm getting this: "{"Name":"FIAT 500","Description":"New car","MaxUserCapacity":5,"PhotoPath":"none"}" What i'm doing wrong? Pass your

This app takes an image, which is essential a background, or workspace. I need to add input text fields onto this workspace given specific coordinates (top, left, width, height). These coordinates would be relative to the image (top/left = 0/0). How would I position my fields/elements relative to the image? <img id="background" ng-src="{{page.backgroundImage}}" /> <input type="text" ng-repeat="field in page.fields" ng-model="field.value" ng-style="{position:'absolute', left:field.left, top:field.top, width:field.width, height:field.height}"/> The code above works great for absolute positioning

I am trying to create two directives. The first directive appends other predefined angular directives (ng-click and ng-class) to the element and then compiles it so that they work. The second directive replaces an element for a template which contains the first directive. I use ng-transclude to carry the element's contents over to the template. The problem is that once the template from directive 2 is added the first directive tries to compile and throws a wobbly: "TypeError: undefined is not a function" Directive 1 works fine when ng-transclude is not present in the template. I have created a

I'm currently using directiveElement.data("$ngModelController") to get access to the element's $ngModelController , as in the following example. describe("directiveElement", function () { it("should do something with ngModelController", inject(function($compile, $rootScope) { var directiveElement = $compile("<input ng-model="myNgModel" customDirective type="text"></input>")($rootScope); $rootScope.$digest(); var ngModelCtrl = directiveElement.data("$ngModelController"); ngModelCtrl.$modelValue = "12345"; // do rest of test })); }); However, I want to know if there is a better to access the

In a directive, where you set a method callback through an arg, say: <my-directive callback='showAlert()' /> You can retrieve the variable through the scope setting in the return: scope: { callback: "&callback" } If the callback is not set, eg: <my-directive /> The value of $scope.callback is still: $scope.callback():function (locals) { return parentGet(scope, locals); } Is there a good way to check that the callback was not set? One way i can think off is to check the attribute parameter for the directive name like link: function (scope, elm, attrs) { if(attrs.callback) { //this attribute has