Question

我有一个角度函数，它从一个JSON文件中获取凭据，该文件将用于用户登录该站点。我有点困惑将我的Native JS转换为angular。下面我提供了我的代码片段

我似乎收到错误'用户'未定义

Native JS

if (text1 == users[0] && text2 == pwd[0]) {
    location.href = "profile-01-home.html";
} else if (text1 == users[1] && text2 == pwd[1]) {
    location.href = "profile-02-home.html";
} else {
    location.href = "login.html";
}

Angular JS

  .controller('logCtrl', ['$scope', 'loginService', function($scope, loginService, $timeout, $window, $location) {

  var promise = loginService.getuser();
  promise.then(function (data){
      $scope.users = data.users;
  });

  if ($scope.username == $scope.users[0] && $scope.password == $scope.users[0].password) {
    $location.path('/profile-01');
  } else if ($scope.username == $scope.users[1] && $scope.password == $scope.users[1].password)  {
    $location.path('/profile-02');
  } else if ($scope.username == $scope.users[2] && $scope.password == $scope.users[2].password) {
    $location.path('/profile-03');
  } else if ($scope.username == $scope.users[3] && $scope.password == $scope.users[3].password) {
    $location.path('/profile-04');
  } else if ($scope.username == $scope.users[4] && $scope.password == $scope.users[4].password) {
    $location.path('/profile-05');
  } else {
    $location.path('/login');
  }

}]）

Answer 1

它可能会变成这样：

if (text1 == users[0] && text2 == pwd[0]) {
    $location.path('/profile-01-home').replace();
} else if (text1 == users[1] && text2 == pwd[1]) {
    $location.path('/profile-02-home').replace();
} else {
    $location.path('/login').replace();
}

虽然，警告Angular 1与Angular 2有很大不同，例如关于路由系统（处理位置handinng）。所以，我建议你首先确定你喜欢哪个平台（angular.1更简单，angular.2是未来），并参加教程...： - ）

Answer 2

我认为您需要在路径中添加斜杠。

你的：$location.path('profile-05')

正确：$location.path('/profile-05')

您的querySelector调用中似乎也有错误。如果您尝试按类名获取元素，则它应该在其前面有一个句点。如果是id，则是octothorp（hashtag）。

document.querySelector('.className') document.querySelector('#idName')

如前所述，您绝对应该使用ng-model将变量注册到模型中。

<input data-ng-model='$scope.variableName'>

Answer 3

您不应该使用

var username = angular.element(document.querySelector('username')).value;
var password = angular.element(document.querySelector('password')).value;

而是在模板中使用ng-model并直接绑定到控制器。

Answer 4

您的user值在$scope上。尝试使用$scope.user[0]代替user[0]。

同样$location.path()需要一个网址。您使用的$location.path('profile-02');不正确。正确的用法是$location.path('/profile-02');

Answer 5

Problamatic是：

 var username = angular.element(document.querySelector('username')).value;
     var password = angular.element(document.querySelector('password')).value;

控制器可以在DOM元素存在之前运行。从ng-model获取值，或使用指令

包装它

Answer 6

以下是一些常规注意事项：当您调用函数来获取用户时，您不需要将promise存储在变量中。如果需要在控制器内调用函数，或者在负载上调用DOM元素，请查看ng-init。您不需要查询字段输入，而是使用ng-model并映射到范围（单独查看）。关于密码我提供了一个很好的例子。记住用户可以在chrome调试工具等中查看范围。我还建议使用对象和json，如下所示：

$scope.data = {};

loginService.getuser()
  .then(function (data){
  $scope.data = data;
});

//然后与用户交互

$ scope.data.user ...

处理密码password example

的示例

Answer 7

此：

<input ng-model="username" id="username" name="name" type="text" placeholder="Username"/>

将是这样的：

$('#username').html('New Value')

不是尝试使用元素id从角度控制器为元素赋值，而是将这些元素与模型或与范围关联的值绑定，然后直接在View模板中使用它。

您需要了解Angular js与jQuery

等库有点不同

例如，要更改id为＆＃34;用户名＆＃34;的div的html在jQuery中，我们将做：

//Other Controller Code
$scope.user = {'username': "NewBoy", 'firstName': "new", 'lastname': "Boy"};

现在，如果我们在Angular中有类似的东西，我们只需要在模板中绑定控制器中的变量。

例如我们的控制器：

<div>
Hello {{user.firstName}}, welcome
</div>

然后我们可以在控制器中执行以下操作：

$location.path('profile-01')

因此，当执行此操作时，它会自动将它们绑定在一起。

要了解AngularJS路由的工作原理，请查看AngularJS文档：https://docs.angularjs.org/tutorial/step_07和https://docs.angularjs.org/api/ngRoute/service/ $ route

你会看到这个：

$location.path('/profile-01')

应该是：

<div class="row">

 <div class="col-xs-12 col-sm-6" id="div1">
  test column1
 </div>

 <div class="col-xs-12 col-sm-6" id="div2">
  test column 2
 </div>

</div>

将原生JS转换为角度

7 个答案: