好吧所以我发现了我正在尝试完成的任务可能是我的解决方案:使用某种切换功能我已经看到在Stack Overflow上的其他问题中表示了几种不同的方式。然而,我的一些特殊情况似乎无法弄清楚如何调整以使其发挥作用。
这是需要出现文字的手风琴:
<div ng-controller="Ctrl">
<accordion id="myID">
<accordion-group heading="My Heading">
{{toggleText}}
</accordion-group>
</accordion>
</div>
需要出现的文字取决于所点击的内容:
<area ng-repeat="x in Object" alt="{{x.name}}" title="" ng-click="thisClick(x.name,x.address);toggle = !toggle" shape="poly" coords="{{x.htmlcoords}}" />
我的图像上有热点。我使用ng-click="thisClick(x.name,x.address)"
轻松捕获来自我的对象的数据,并且我能够在thisClick(name,address)
函数中提醒它。这部分HTML是在一个div中,它分别调用与上面相同的控制器,我不知道这是否相关。在尝试切换之前我无法使代码工作,除非我将控制器保持在原来状态并再次调用它。无论如何,现在要应用切换功能,我尝试将ng-click
更改为上面显示的内容,并将功能更改为:
$scope.thisClick = function(name,address){
$scope.toggle = true;
$scope.$watch('toggle',function(){
$scope.toggleText = $scope.toggle ? '' : name+address;
});
};
最终,名称和地址不会被挤压在一起,但这仅用于测试目的。
当我运行代码时,根本没有发生任何事情。
有没有办法清理它或者完全不同地接近它?我希望我提供了足够的信息。
我希望它如此简单:
<area ng-repeat="x in building" alt="{{x.name}}" title="" ng-click="thisBuilding = x.name+x.address" shape="poly" coords="{{x.htmlcoords}}" />
$scope.buildingName = name;
$scope.buildingAddress = address;
$scope.thisBuilding = function(){
return $scope.buildingName + " " + $scope.buildingAddress;
};
};
{{thisBuilding()}}
答案 0 :(得分:0)
这听起来很像范围问题。当ng-repeat
为每个项目创建一个新的子范围时,很可能最终会在“错误”范围内设置$scope.toggleText
属性,即不在{{1}的范围内你试图显示属性的地方。
您可能希望使用某些Angular检查器工具,例如ng-inspector来验证这一点。
如果问题确实是accordion-group
属性以错误的子范围结束,则一种可能的解决方法可能是在根范围内为该属性引入容器对象。这可能起作用的原因是对象作为子作用域的引用传递,而不是像原始属性那样的副本。关于这个主题的更多内容可以从Understanding Scopes article in AngularJS wiki中读取。
所以,从控制器toggleText
开始沿着这些方向:
Ctrl
然后在html模板中:
// inside the controller code:
// initialize the toggleContainer object
$scope.toggleContainer = {};
最后在<div ng-controller="Ctrl">
<accordion id="myID">
<accordion-group heading="My Heading">
{{toggleContainer.text}}
</accordion-group>
</accordion>
</div>
函数中,将您想要的值存储到属性thisClick
而不是简单toggleContainer.text
:
toggleText