將角度傳遞函數與指令中的關注點分離

Question

我們總是被告知要確保關注點正確分離（如果我有jQuery背景，我該如何“思考AngularJS”？），並且該視圖應該是正在發生的事情的正式記錄。

假設我們有一條指令，該指令基於單獨的函數動態地元素的src。 我的印象是，我們應該使用隔離范圍和“＆”將函數傳遞給指令。

但是，由於視圖現在包含邏輯，這是否算作不分離關注點？ 還是因為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 個解決方案

解決方案1
0 2014-03-07 17:02:25

將角度傳遞函數與指令中的關注點分離

問題描述

1 個解決方案

解決方案1 0 2014-03-07 17:02:25

解決方案1
0 2014-03-07 17:02:25