仅在客户端输入验证后运行Angular函数

时间:2014-01-26 22:27:19

标签: angularjs

我有一个函数'loadNewChannel()',它现在在输入字段中输入任何值时运行。我想仅在通过基本客户端列表验证值时才运行它。

我发现this应该满足我的需求,但我不确定如何将其作为触发函数的条件来实现。

ANGULAR SCRIPT

var Channelinput = 'no-layout-archive';
var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']);

app.controller('channelShow', function($scope, $resource) { 
  var Channel = $resource('http://api.are.na/v2/channels/:slug');

  var channel = Channel.get({slug: Channelinput, sort: 'position', direction: 'asc'}, function(){
            $scope.channel = channel;
          });

    $scope.loadNewChannel = function(){
                var channel = Channel.get({slug: 'no-layout-premium-archive', sort: 'position', direction: 'desc'}, function(){
                $scope.channel = channel;
    });
  }
})

HTML

<input placeholder="passcode" onfocus="this.placeholder = ' '" onblur="this.placeholder = 'passcode'" ng-keyup="loadNewChannel()" >

我知道这不是一个安全的系统,但它适用于小型测试版,这不是问题。实时链接(单击“访问溢价”以显示输入字段):http://nolayout.com/archive

欢迎任何帮助,谢谢

1 个答案:

答案 0 :(得分:1)

如果验证发生在客户端并且它是自定义的,您可以尝试这样的事情:

var Channelinput = 'no-layout-archive';
var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']);

app.controller('channelShow', function($scope, $resource) {
    var Channel = $resource('http://api.are.na/v2/channels/:slug');

    var channel = Channel.get({ slug: Channelinput, sort: 'position', direction: 'asc' }, function() {
        $scope.channel = channel;
    });

    $scope.loadNewChannel = function() {
        var channel = Channel.get({ slug: 'no-layout-premium-archive', sort: 'position', direction: 'desc' }, function() {
            $scope.channel = channel;
        });
    };

    $scope.passcode = '';

    function validatePasscode(code) {
        // put validation logic here, return true or false
        return code == "somevalidpasscode";
    }

    $scope.$watch('passcode', function(value) {
        var isValid = validatePasscode(value);

        if (isValid) {
            $scope.loadNewChannel();
        }
    });
});

您的输入将丢失keyup事件并具有ng-model属性:

<input placeholder="passcode" onfocus="this.placeholder = ' '" onblur="this.placeholder = 'passcode'" ng-model="passcode" >

希望这有帮助