Question

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

$（ELEM）.find（＆＃39;按钮＆＃39）。长度

现在返回正确的值但是它被称为hack并且有更好的方法来执行它。我知道ngIf创建了一个子范围，如果我没有在$ timeout中包装它，那么当我的链接代码运行时，按钮元素是不可用的。

那么在没有$ timeout hack的情况下访问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

如果您只想绑定点击事件，只需在按钮中点击一次：

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);        
        }
    }
 });

Angularjs指令在ngIf中找到元素

2 个答案:

HTML

JS