What i want:--- i want to disable few links present at login page until and unless correct password is given. I can make them hide but since i am learning i want to learn how this can be done. Enabling of the disabled links will happen on click of the submit button.
What i did:--- I have written the code and i think it should work. I am using a custom directive and link : bind event. I think the problem lies in the view (possibly), may be in ng-controller.
What gone wrong:--- So the scope change in the controller is not getting reflected in the directive. Because of which event.preventDefault()is not getting triggered. So initially directive scope takes the value of the scope in controller. If i have set the value of the $scope.linkenabled = true in controller as i have done right now, then directive scope will be set as true. But when i click on login submit button though $scope.linkedenable value in controller is changing to false because of $scope.linkedenable = - $scope.linkedenable.but it is not reflecting in directive scope and it is still true.
Here is my code :--- login.js
trumodule.controller("trucontrollerlogin", ['$scope', '$location', '$timeout', function ($scope, $location, $timeout) {
***$scope.linkEnabled = true;***
$scope.submit = function () {
$scope.logimg = true;
var username = $scope.username;
var password = $scope.password;
if (username == "674" && password == "Dakar") {
$scope.status = "yes";
$timeout(function () {
$scope.logimg = true;
$location.path('/KnowHow');
}, 500);
console.log($scope.linkEnabled);
***$scope.linkEnabled = !$scope.linkEnabled;***
console.log($scope.linkEnabled);
}
else {
$scope.status = "no";
$timeout(function () {
$scope.logimg = true;
}, 500);
}
}
}])
***.directive('mylink', function () {
return {
scope: {
enabled: '=mylink'
},
link: function (scope, element, attrs) {
element.bind('click', function (event) {
console.log(scope.enabled);
if (scope.enabled) {
event.preventDefault();
}
});
}
};
});***
Index.cshtml
<body ng-app="TruModule">
<td class="leftMenu width" ***ng-controller="trucontrollerlogin"***>
<a mylink = "linkEnabled" href="#!KnowHow"><img src="~/icons8-home-26 (2).png" /></a>
<a mylink = "linkEnabled" href="#!Employee"><img src="~/icons8-people-26.png" /></a>
<a mylink = "linkEnabled" href="#!Directives"><img src="~/icons8-book-shelf-26.png"/></a>
</td>
Please help me out with this problem. Thanks in Advance
