1

指示

app.directive('mcAvatar', function() {
    return {
        restrict: 'E',
        scope: {
            width: '=width',
            src: '@src'
        },
        templateUrl: 'directives/mc-avatar/mc-avatar.html',
        link: function (scope, element, attrs) {
            console.log(element[0])
        }
    };
});

模板

<img width="{{ width }}" src="{{ src }}" alt="" class="mc-avatar-round">

用法

<mc-avatar width="50" src="http://lorempixel.com/320/320/cats"></mc-avatar>

element指令中的内部链接函数返回：

<mc-avatar width="50" src="http://lorempixel.com/320/320/cats" class="ng-isolate-scope">
    <img width="50" src="http://lorempixel.com/320/320/cats" alt="" class="mc-avatar-round">
</mc-avatar>

仅给出上下文mg-avatar。如何访问img此处的元素以便我可以使用bind函数？

4

2 回答 2

1

这是您需要的代码，

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<mc-avatar width="50" src="http://lorempixel.com/320/320/cats"></mc-avatar>

<script>
var app = angular.module("myApp", []);
app.directive('mcAvatar', function() {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            width: '=width',
            src: '@src'
        },
        
        template: '<img width="{{ width }}" src="{{ src }}" alt="" class="mc-avatar-round">',
        link: function (scope, element, attrs) {
            console.log(element.find("img"))
        }
    };
});
</script>

</body>
</html>

请运行代码段。

这是一个工作演示

于 2017-01-18T07:46:58.520 回答
1

您可以使用element.find("img");in yourdirective然后使用.bind它上面的语句来附加事件。

希望这可以帮助！。

于 2017-01-18T07:54:14.557 回答