在Angularjs

Question

我的申请表中有登录表单。我决定在blur元素的input上显示错误。

它有效，但我的自定义指示没有问题。 （实际上我使用教程制作了这个指令，但没有解释任何内容）

这里我的代码用html：我已经把我所有的问题与适当的js行。请帮助我理解所有这些directive吗？

我的HTML：

<div ng-app="myNewApp" id="container">
    <div ng-controller="loginCont">
      <h1>{{name}}</h1>
<form class="form" name="loginForm" novalidate ng-submit="userLogin()">
    <div class="from-group" ng-class="{'has-error':loginForm.email.$invalid && loginForm.email.$dirty, 'has-success':loginForm.email.$valid && loginForm.email.$dirty}">
        <label for="emial">Email</label>
        <input type="email" class="form-control" ng-model="user.email" name="email" required cu-focus  />
        <span ng-show="loginForm.email.$invalid && loginForm.email.$dirty && !loginForm.email.focused">Wrong Email</span>
    </div>
    <div class="from-group">
        <label for="password">Email</label>
        <input type="password"  class="form-control" ng-model="user.password" name="password" required cs-focus >
        <span ng-show="loginForm.password.$invalid && loginForm.password.$dirty && loginForm.submitted">Wrong Password</span>
    </div>
    <div class="form-group">
        <button class="btn btn-primary" ng-disabled="loginForm.$invalid" type="submit">Login In</button>
    </div>
</form>

</div>

我的js：怀疑我。

var app = angular.module('myNewApp', [])
    .controller('loginCont', ['$scope', function ($scope) { //what is different from directive controller?
        $scope.name = 'Angular';
    }])

angular.module('myNewApp')
    .directive('cuFocus', function () {
            return {
                restrict : 'A',
                require :'ngModel', //why ngModel require here what it's doing here? what else we can pick further?
                link : function (scope, element, attr, controller) { //what is controller here?
                    controller.focused = false; //how !loginForm.email.focused connected to controller here?
                    element.bind('focus', function (e) {
                        scope.$apply(function(){ //why should apply intead controller.focused = true;
                            controller.focused = true; //how this update there in span attribute?
                        });
                    })
                    .bind('blur', function (e) {
                        scope.$apply(function(){    
                            controller.focused = false;
                        });
                    })
                }
            }
    });

Live Demo

Answer 1

1. 为什么ngModel在这里需要它在这里做什么？还有什么我们可以进一步选择？ -means ng-model应该在同一个元素上使用
2. 这里的控制器是什么？ ng-model指令的控制器，因为你需要ng-model你可以注入它
3. 怎么！loginForm.email.focused连接到控制器这里？ 这是通常的价值绑定。您将ng-model controller称为＆＃39; controller＆＃39;这里是指令，在html中你把它称为＆＃39; loginForm.email＆＃39;。
4. 为什么要应用而不是controller.focused = true; 原因绑定是标准的js-event，因此侦听器内部的代码执行＆＃39; outside＆＃39;角度，所以让角度知道模型已经改变你需要使用$ apply。
5. 如何更新span属性？ 这只是通常的价值绑定。您将ng-model controller称为＆＃39; controller＆＃39;这里是指令，在html中你把它称为＆＃39; loginForm.email＆＃39;。