Question

我们总是被告知确保正确分离关注点（How do I “think in AngularJS” if I have a jQuery background?），并且该视图应该是正在发生的事情的正式记录。

假设我们有一个指令，它基于一个单独的函数动态地调用元素的src。我的印象是我们应该使用隔离范围和'＆amp;'将函数传递给指令。

但是，由于视图现在包含逻辑，这是不是因为没有分离问题？或者它是否可以，因为myFunction（）存储在控制器中？

<img my-src callback='myFunction()' />

HTML

<body ng-app='testApp'>
    <div ng-controller='TestCtrl'>
        <img my-src callback='myFunction()' />
    </div>
</body>

JS

angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
    $scope.myFunction = function() {
        return 'http://nodejs.org/images/roadshow-promo.png';
    }
})
.directive('mySrc', function() {
    return {
        restrict: 'A',
        scope: {
            callback: '&'
        },
        link: function ( scope, elem, attrs ) {
            elem.attr('src', scope.callback());
        }
    };
})

Answer 1

对我来说，这看起来很好，控制器仍在控制视图显示的内容......但如果它只是动态设置src，则可以使用ng-src。

<img ng-src="{{ myFunction() }}" />

此处示例：http://plnkr.co/edit/Rw2OG1ltrmpUO2oLO1fE?p=preview

将角度传递函数中的关注点分离为指令

1 个答案: