2016-12-23 3 views
0

角度を使用してキューブをクリックすると、新しいページを起動します。私のコードは、ボックスをクリックすると現在何もしていないので、すべてが間違っている可能性があります。クリック角機能は動作しません

マイ上のクリック機能は次のとおりです。

$scope.clicked = function(){ 
     console.log('pppp'); 
     window.location = "#/test.html"; 
} 

私はこのように私のHTML内の関数を呼び出す:

打ち上げに新しいリンクを許可されていない私のコードが間違っている何
<html> 
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> 


<header> 
    Angularity 
</header> 

<body ng-app="App"> 
<div ng-click="clicked()" class="wrap"> 
    <div class="cube" change-background colorcode=¨#f45642¨> 
     <div class="front" ><span>E</span></div> 
     <div class="back" ></div> 
     <div class="top" ></div> 
     <div class="bottom" ></div> 
     <div class="left" ></div> 
     <div class="right" ></div> 
    </div> 
</div> 

<div class="wrap2"> 
    <div class="cube" change-background> 
     <div class="front" colorcode=¨#f45642¨><span>S</span></div> 
     <div class="back"></div> 
     <div class="top"></div> 
     <div class="bottom"></div> 
     <div class="left"></div> 
     <div class="right"></div> 
    </div> 
</div> 

<div class="wrap3"> 
    <div class="cube" change-background> 
     <div class="front" colorcode=¨#f45642¨><span>C</span></div> 
     <div class="back"></div> 
     <div class="top"></div> 
     <div class="bottom"></div> 
     <div class="left"></div> 
     <div class="right"></div> 
    </div> 
</div> 

</body> 
</html> 

ボックスがクリックされたら?

http://codepen.io/Feners4/pen/KggAwg

+0

return文の後に$ scope.clickedを設定します。あなたはまた、返り前であっても、そのスコープが実際にその外側の関数で定義されていないように見えます。 – Fallenreaper

答えて

0

ここには固定バージョンがあります。元のコードペンの問題は、div要素があなたのディレクティブの外側にあることでした。また、$scope.clickedを間違った場所に定義しました。それが今でHTMLが

<div ng-click="clicked()" my-click class="wrap"> 
    <div class="cube" change-background colorcode="#f45642"> 
    </div> 
</div> 

のように見え、ディレクティブの定義がここにあるので、私は、新しいディレクティブmyClickを作成しました:あなたが作成したくない場合は

angular.module('App', []) 
    .directive('changeBackground',() => {...}) 
    .directive('myClick',() => { 
    return { 
     restrict: 'A', 
     link: (scope) => { 
     scope.clicked =() => { 
      console.log('pppp'); 
      window.location = "#/test.html"; 
     } 
     } 
    }; 
}); 

http://codepen.io/phillypham/pen/PbgXOE

1

あなたはNG-コントローラを定義し、そこにクリックされた関数を定義する必要があります。

<body ng-app="App"> 
    <div ng-controller="TestCtrl"> 
     ..... 
    </div> 
</body> 
0

新しいコントローラを追加し、ユーザーをそのURLにリダイレクトしたい場合は、ディレクティブにclickイベントを追加することができます。

関連する問題