gpt4 book ai didi

javascript - Angular 中的关注点分离 - 将函数传递给指令

转载 作者:行者123 更新时间:2023-11-28 08:27:28 26 4
gpt4 key购买 nike

我们总是被告知要确保适当的关注点分离 ( How do I “think in AngularJS” if I have a jQuery background? ),并且 View 应该是正在发生的事情的正式记录。

假设我们有一个指令,可以根据单独的函数动态地获取元素的 src。我的印象是我们应该使用隔离范围和“&”将函数传递给指令。

但是,由于 View 现在包含逻辑,这是否算作不分离关注点?或者因为 myFunction() 存储在 Controller 中所以可以吗?

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

最佳答案

对我来说这看起来不错, Controller 仍然控制着 View 显示的内容...但如果它真的只是动态设置 src,您可以使用 ng-src。

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

示例如下:http://plnkr.co/edit/Rw2OG1ltrmpUO2oLO1fE?p=preview

关于javascript - Angular 中的关注点分离 - 将函数传递给指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22240127/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com