Angularjs 指令在 ngIf 中查找元素

Question

我创建了一个应该显示地址的angularjs指令。

$（elem）.find（'button'）.length

现在返回正确的值，但它被称为黑客，有没有更好的方法可以做到这一点。我知道 ngIf 创建了一个子范围，如果我不将其包装在 $timeout 中，当我的链接代码运行时，按钮元素就不可用。

那么，在没有$timeout黑客的情况下访问我的ngif中的元素的漂亮方法是什么？

我的指令

angular.module('directives')
.directive('addresss', ['$timeout', function ($timeout) {
    return {
        restrict: 'AE',
        scope: {
            address: '='
        },
        templateUrl: 'template........ ',
        link: function(scope,elem,attr){
            $timeout(function(){
                console.log($(elem).find('button').length);
            })
        }
    };
}]);

地址指令的模板

<div class="spacer">
    <h1>Address</h1>
    <div>
        <strong>{{address.name}}</strong>
    </div>
    <div ng-if="address.name">
        <button class="btn-link">Delete</button>
    </div>
</div>

Answer 1

如果你想绑定一个点击事件，你可以在按钮上放一个ng-click：

.JS：

app.directive('address', [function () {
    return {
        restrict: 'AE',
        scope: {
            address: '='
        },
        templateUrl: 'template.html ',
        link: function(scope,elem,attr){
          scope.myClickHandler = function() {
            console.log('button clicked');
          });
        }
    };

模板：

<div class="spacer">
    <h1>Address</h1>
    <div>
        <strong>{{address.name}}</strong>
    </div>
    <div ng-if="address.name">
        <button ng-click="myClickHandler()" class="btn-link">Delete</button>
    </div>
</div>

Answer 2

试试这个（如果我得到你的问题）

.html

<div data-ng-controller="MainController">
  <div data-my-dir address="address"></div>
</div>

.js

angular.module('myApp', [])
.controller('MainController',function($scope) {
    $scope.address = {
        name : 'myname'
    };
})
.directive("myDir", function () {
    return {
        scope:{
            address: '=',
        },
        template:'<button class="btn-link" ng-if="address.name">Delete</button>',
        link: function (scope, elem) {
            console.log(scope.address.name);        
        }
    }
 });