Angularjs 角度指令：可切换图像作为隔离范围
我想把它作为一个指示。这是我的第一次实验。我从w3学校得到了这个想法 我认为我的小提琴写得很好，然而，读完后我又不知所措了。因此，将元素设计为Angularjs 角度指令：可切换图像作为隔离范围,angularjs,Angularjs,我想把它作为一个指示。这是我的第一次实验。我从w3学校得到了这个想法 我认为我的小提琴写得很好，然而，读完后我又不知所措了。因此，将元素设计为 <photo> <img ng-click="toggleOnOff()" ng-src="{{'togglePhotoSrc()'}}"/> 似乎不被推荐。对吧? 我想作为一个独立的作用域来解决这个问题。我希望在指令中知道这两个URL。如果可能，我希望在不使用element.addClass的情况下执行此操作 设
<photo>
<img ng-click="toggleOnOff()" ng-src="{{'togglePhotoSrc()'}}"/>
<body ng-controller="MyCtrl">
<div><pre>State is on = {{isOn}}</pre></div>
<div>
<input type="checkbox" ng-model="isOn" />Switch the light
<a toggle="isOn">
<img ng-src="{{ getToggledUrl() }}">
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('toggle', function() {
return {
scope: {
toggle: "="
},
link: function($scope, element, attrs) {
element.click(function() {
$scope.$apply(function() {
var src = element.find('img').attr('src');
$scope.toggle = !$scope.toggle
})
})
}
}
})
function MyCtrl($scope) {
$scope.isOn = false;
$scope.onUrl = "http://www.w3schools.com/js/pic_bulbon.gif";
$scope.offUrl = "http://www.w3schools.com/js/pic_bulboff.gif";
//toggle image
$scope.getToggledUrl = function() {
return $scope.isOn ? $scope.onUrl : $scope.offUrl;
};
}
状态为on={{isOn}
开灯
角度.module（'app'，[]）
.directive（'toggle'，function（）{
返回{
范围：{
切换：“=”
},
链接：函数（$scope，element，attrs）{
元素。单击（函数（）{
$scope.$apply（函数（）{
var src=element.find（'img'）.attr（'src'）；
$scope.toggle=！$scope.toggle
})
})
}
}
})
函数MyCtrl（$scope）{
$scope.isOn=false；
$scope.onUrl=”http://www.w3schools.com/js/pic_bulbon.gif";
$scope.offUrl=”http://www.w3schools.com/js/pic_bulboff.gif";
//切换图像
$scope.getToggledUrl=function（）{
返回$scope.isOn？$scope.onUrl:$scope.offUrl；
};
}
对于简单的图像切换，您可能更容易使用隐藏/显示样式：
<my-toggle value="isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>
<my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>
打开灯
onUrloffUrlisOn希望这有帮助 我已经做了一个演示，展示了我将如何去做。我不知道您是否需要指令本身之外的指令状态值，因此我有两个版本，一个从控制器范围中获取开/关值并使用它，另一个版本中包含所有逻辑 两个指令的“接口”如下所示：
因为我不知道你在想什么，理想的解决方案是，在你给我指出正确的方向之前，我不会详细介绍实现细节，所以我不会解释你已经知道的事情。尽管如此，请随意提问。为什么在指令中切换Class？您想知道指令中的src是什么意思？你想通过考试吗？在任何情况下，我认为指令中的模板都是摆脱jQuery.toggleClass removed的好方法——我的坏&&！故意的。我最初的想法是将URL封装在指令中，因为我认为隔离作用域用于可重用组件。这是一个思维错误吗？我只使用jquery，因为所有其他尝试都失败了。我从一个模板开始，但在如何设计新指令的外观方面遇到了困难。回答得很好。非常清晰易读。也许这个bool应该改名为ifOn。也许可以使用一个好的界面来隔离作用域，对于上面这样的非常简单的小部件（没有转换或控制器逻辑）。通常，如果您将指令视为纯函数，并让它们仅依赖于您提供给它们的属性，而不是外部作用域变量，那么您将避免隔离作用域可能导致的许多痛苦。否则，隔离作用域可能非常棘手！Thx会清除很多。然而，在我们的示例中，在一个微型控制器中有一个微型的isOn保持状态。因此，我们可以或应该将其转移到其他地方。我很清楚状态属于控制器，但我不清楚何时将其置于指令内或指令外。因此，在这种情况下，您不会使用具有普通控制器的隔离作用域吗？具有作用域状态（
isOn$watch$scope<my-toggle value="isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>
<my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>