Question

我创建了一个指令，除了“ng-click”在我的控制器中不起作用外，一切运行良好。单击按钮时没有任何反应。我错了什么？

这是我的app.js

var app = angular.module('mainApp',[ 'ui.router' ]);

app.config(['$stateProvider', function($stateProvider) {
  $stateProvider
        .state('login', {
            url: '/login',
            controller: 'LoginPageCtrl',
        });
}])

app.directive('loginPage', function loginPage() {
    return {
        restrict: 'EA',
        templateUrl: 'app/partial/login.html',
    }
})

app.controller('LoginPageCtrl', function($scope) {

    $scope.login = function() {
        alert("You Clicked Me")
    }

})

然后在我的login.html中我有

<button ng-click="login()" type="submit" class="btn btn-default">Sign in</button>

已编辑 - 只是添加了以下代码

使用指令因为登录使用特定的css用于不同的页面布局（登录页面和用户页面）。听起来可能听起来很尴尬。

这是我的index.html

<!DOCTYPE html>
<html lang="en" ng-app="BlurAdmin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>


<link ng-if="!$authPage" rel="stylesheet" href="styles/app-b6796b3788.css">

<link ng-if="$authPage"  rel="stylesheet" href="styles/auth-a200a050c1.css">

</head>
<body>

<page-content ng-if="!$authPage"></page-content>

<login-page ng-if="$authPage"></login-page>


<script src="scripts/app-5a80256787.js"></script>

</body>
</html>

Answer 1

通过添加被忽略的<div ui-view></div>来解决问题。现在，我现在可以调用登录templateUrl中的state加载ui-view

这是新的layout.html

    <div ui-view></div>

然后指令现在在app.js

中发生了变化

app.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('login', {
        url: '/login',
        controller: 'LoginPageCtrl',
        templateUrl: 'app/pages/login.form.html',

    });
}])

app.directive('loginPage', function loginPage() {
   return {
      restrict: 'EA',
      templateUrl: 'app/partial/layout.html',
    }
 })

ng-click在AngularJS自定义指令中不起作用

1 个答案: