在angular中找到深层嵌套（后代）元素（id）

Question

我现在一整天都坐在这里：在我的AngularJS指令中，我找不到具有特定id的嵌套元素。 jQuery被加载和使用。

HTML：

<div class="container_header-login">
    <div class="shit" data-ng-if="!login">
        <input type="text" placeholder="username/email"/>
        <input type="text" placeholder="password"/>
        <br/>
        <button type="button" class="btn btn-primary">Login</button>
        <a href="#">Register</a>            
        <a href="#">Forgot password</a> 
        <p id="test">shit</p>
    </div>

    <div data-ng-if="login">

    </div>
</div>

指令：

var mHeaderLogin = angular.module('app.directives.mHeaderLogin', ['mMain'])// mMain-dependent due to factory call
.directive('dHeaderLogin', fHeaderLogin);
function fHeaderLogin() {
    console.log("login");
    return {
        restrict: 'AE',
        //replace: true,
        scope: {}, //isolate scope
        templateUrl: 'app/directives/header-Login/header-Login.html',
        controller: function ($scope, simpleFactory) {
            $scope.users = simpleFactory.getUsers();
            $scope.bLogin = false;
        },
        link: function (scope, element, attrs) {
            element.find("#test").bind('click', function () {
                alert("clicked");
            });
        }
    }
}

唯一有用的是使用（星号）：

    link: function (scope, element, attrs) {
        element.find("*").bind('click', function () {
            alert("clicked");
        });
    }
}