Question

所以想要一个带有图片的旋转立方体，因为这就是所有酷孩子想要的东西。然后决定我想在数据库中使用它并使用平均堆栈，所以设置它。

这就是问题所在。在index.html版本中，多维数据集有时会混乱并移动到屏幕上阻止其他所有内容。只需打开下面的链接，然后点击菜单几个不同的菜单选项，您就会明白我的意思。 http://v-ghost.port0.org:8081/TESTCube/public/index.html

工作了很长时间，试图弄清楚出了什么问题，结果发现它与我加载菜单的方式有关，我尝试使用ng-bind-html生成它。

            <figure class="front"><div id="front-page" ng-bind-html="showpane('front')"></div></figure>
            <figure class="back"><div id="front-page" ng-bind-html="showpane('back')"></div></figure>
            <figure class="right"><div id="front-page" ng-bind-html="showpane('right')"></figure>
            <figure class="left"><div id="front-page" ng-bind-html="showpane('left')"></figure>
            <figure class="top"><div id="front-page" ng-bind-html="showpane('top')"></figure>
            <figure class="bottom"><div id="front-page" ng-bind-html="showpane('bottom')"></figure>

奇怪的是，如果我将其更改为仅使用文本（即不那么花哨的方式）：

    <button class="show-front">Front</button><br/>
    <button class="show-back">Back</button><br/>
    <button class="show-right">Right</button><br/>
    <button class="show-left">Left</button><br/>
    <button class="show-top">Top</button><br/>
    <button class="show-bottom">Bottom</button><br/>

尝试一下 http://v-ghost.port0.org:8081/TESTCube/public/index-nobind.html，坚不可摧（着名的遗言）。

我无法理解为什么，为什么我在按钮中调用函数会破坏立方体路径？另外，是否有更简单的方法来获取数组中字符串的值，然后构建一个函数以在ng-bind中获取它？

试图让它尽可能简单地进行测试，如果你想尝试一下，应该只是复制html。

Answer 1

经过多次摆弄后，我永远无法弄清楚为什么ng-bind表现得像这样。并且没有错误消息，很难确定问题。

如果遇到同样的问题，解决问题的方法之一就是更改控制器以在对象下显示数据。首先将控制器定义为app

<body ng-app="DBFScube" ng-controller="AppCtrl as app">

然后为每个选项调用子函数（getmenuname）。

   <button class="show-front">{{app.getmenuname('front')}}</button><br/>
    <button class="show-back">{{app.getmenuname('back')}}</button><br/>
    <button class="show-right">{{app.getmenuname('right')}}</button><br/>
    <button class="show-left">{{app.getmenuname('left')}}</button><br/>
    <button class="show-top">{{app.getmenuname('top')}}</button><br/>
    <button class="show-bottom">{{app.getmenuname('bottom')}}</button>

控制器看起来像这样

var app = this;
//
//$http.get("http://localhost:3000").success(function(CubeSides){
  //  app.CubeSides = CubeSides;
//})
$http.get("http://localhost:3000").success(function(CubeSides){
    $scope.sides=CubeSides;
    console.log("Loading data");
})
app.getmenuname = function(side) {
    if($scope.sides === undefined) {
        console.log("Not loaded fside " + side );
    } else {
        console.log("Got menu pane " + $scope.sides);
        var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
        console.log("Sending: " + fside.menuname);
        return fside.menuname;
    }
}

这可能不是正确的做法，但是如果你需要做的就是在某些按钮上设置名称，那就可以了：）

ng-bind angular的奇怪行为

1 个答案: