Question

我想在使用Angular单击多维数据集时启动新页面。当我点击方框时，我的代码当前没有做任何事情，所以我可能会出错。

我的点击功能是：

$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

Answer 1

您需要定义ng-controller并在那里定义点击的功能。

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

Answer 2

这是一个固定版本。原始代码笔中的问题是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

Answer 3

如果您不想创建新控制器并且只想将用户重定向到该网址，则可以在指令上添加click事件：

link: function($scope, element, attr) {
   element.on('click', function() { window.location = "#/test.html"; });
   [omissis]
enter code here

单击角度功能将无法正常工作

3 个答案: