Angular 2nd directive not working

Question

I have 2 directives in one page. The first one works fine, but the second one not working.

This is my Code:

HTML

<body class="login" ng-app="Login">
<div ng-controller="HttpLoginController">
<wrongdetails></wrongdetails>
<loading></loading>
<input type="submit" ng-click="LoginUser()" value="Login" />
</div>
</body>

JS

var app = angular.module("Login", [])
app.controller("HttpLoginController", function($scope,$http){
$scope.LoginUser = function(){
$scope.loading = true;
var data = [];
var config = {}
$http.post('Mylink', data, config)
.success(function (data, status, headers, config) { $scope.loading = false;})
.error(function (data, status, header, config) {$scope.wrongdetails = true; });
};      
});
//Directives
app.directive('loading', function () {
    return {
        restrict: 'E',
        //replace:true,
        template: '<div id="loading"> <div class="progress-line"></div><br/> </div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
    }
})
app.directive('wrongdetails', function () {
    return {
        restrict: 'E',
        replace:true,
        template: '<div class="alert alert-danger display-hide"><button class="close" data-close="alert"></button><span> Error. </span></div>',
        link: function (scope, element, attr) {
              scope.$watch('wrongdetails', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
    }
})

But The second Directive never show. What I am doing wrong?

Sorry for my mistake. I forget to copy paste the directives. I think now is ok

You should provide the code for the both directives (if you have any). Otherwise your question is not really complete... — lowselfesteemsucks, Jul 29 '16 at 12:09

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Remove the following line in your second directive:-

replace:true ,

The reason with the explanation is already available. Refer this link Explain replace=true in Angular Directives (Deprecated)

edited May 23 '17 at 11:44

Community

1
1

answered Jul 29 '16 at 12:31

Rajkumar R

1,097
8
14

1

I remove the line but still the second directive not showing – Dimitris Jul 29 '16 at 12:36

Angular 2nd directive not working

1 Answers1