2016-12-23 2 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

вы устанавливаете $ scope.clicked после оператора return. Вы также выглядите так, как это было до возвращения, что $ scope не определен в этой внешней функции. – Fallenreaper

ответ

0

Вот фиксированная версия. Проблема в вашей первоначальной ручке кода заключалась в том, что элемент div находился за пределами вашей директивы. Вы также определили $scope.clicked в неправильном месте. Я создал новую директиву myClick, так что теперь HTML выглядит

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

И определение директивы здесь:

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

Вы должны определить нг-контроллера и определить функцию щелкнул там.

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

Если вы не хотите, чтобы создать новый контроллер, и вы хотите просто перенаправить пользователя на этот URL-адрес, вы можете добавить событие click по вашей директиве:

link: function($scope, element, attr) { 
    element.on('click', function() { window.location = "#/test.html"; }); 
    [omissis] 
enter code here 
Смежные вопросы