gpt4 book ai didi

javascript - 使用 angularjs 中的自定义服务交换 ng-src 属性

转载 作者:行者123 更新时间:2023-11-28 00:34:40 25 4
gpt4 key购买 nike

我创建了一个Pluker让您变得更轻松。我可以通过将其写入 Controller 来使图像正常交换。我想知道如何利用自定义服务或工厂来实现相同的功能。这是代码。
HTML

<body ng-app="myApp">
<!-- navigation bar -->
<div id="navBar">
<!-- here goes the dynamic navbar -->
</div>
<!-- navigation bar ends here -->
<div class="row fullWidth">
<!-- sidebar begins -->
<div id="sidebar" ng-controller="SideCtrl">
<!-- here goes a static sidebar -->
<div class="large_3_custom columns">
<ul class="side-nav side_nav_custom">
<li>
<img src="images/dashboard.png" alt="">
<a href="#">DASHBOARD</a>
</li>
<li>
<img src="images/company_profile.png" alt="">
<a href="#">COMPANY PROFILE</a>
<img ng-click="myData.swapHere();subSec = !subSec" id="arrowRotate" ng-src="{{myData.images.current}}">
</li>
<li ng-show="subSec">
<img src="" alt="">
<a href="#">SERVICES</a>
</li>(more on plunker)

Angular

var myApp = angular.module("myApp", []);
myApp.service("ReverseService", function() {
// service func goes here --
this.imgSwap = function(a, b, def) {
if (def === a) {
def = b;
} else if (def === b) {
def = a;
}
}
})
myApp.controller("SideCtrl", function($scope, ReverseService) {
console.log("thomas");
$scope.myData = {};
$scope.myData.images = {
initialImage: "images/prof_arrow1.png",
finalImage: "images/prof_arrow.png",
current: "images/prof_arrow1.png"
};
$scope.myData.swapHere = function() {
ReverseService.imgSwap($scope.myData.images.initialImage, $scope.myData.images.finalImage, $scope.myData.images.current);
};
$scope.subsec = false;
$scope.bookSec = false;
});

提前致谢。

最佳答案

这里的问题是您将字符串传递到服务函数中。字符串被拆箱并且作为引用类型传递。

尝试将图像对象传递到您的服务函数中。这应该可行。

myApp.service("ReverseService", function() {
// service func goes here --
this.imgSwap = function(images) {
if (images.current === images.initial) {
images.current = images.final;
} else if (images.current === images.final) {
images.current = images.initial;
}
}
})

关于javascript - 使用 angularjs 中的自定义服务交换 ng-src 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28623217/

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