gpt4 book ai didi

javascript - 从外部脚本与 angularjs 模型通信

转载 作者:行者123 更新时间:2023-11-30 16:27:48 26 4
gpt4 key购买 nike

我已经尝试了所有我能想到的方法来为我的表单触发 ng-model 函数。我正在使用 Bootstrap 日期选择器。我需要 Bootstrap 日期选择器在选择日期时触发 ng-model 值更新,有人可以告诉我如何使用外部库或外部事件与 ng-model 交互吗?

这是我的代码示例。

它不是很复杂。

/// <reference path="../../typings/tsd.d.ts" />
var app = angular.module("DatePick", []);
var doc = document;
app.controller("AppCtrl", [
"$scope", "$q", "$http",
function($scope, $q, $http){
var appCtrl = this;

appCtrl.name = "Jesse App";

$scope.$on("pickerChange", function(evt, data){

$scope.$apply(function(){

$scope.form[data.key] = data.value;
console.log(data);
})


})
}
]);

var $scope;
doc.addEventListener("DOMContentLoaded", function(e){

angular.bootstrap(doc.querySelector("html"), ["DatePick"]);

var element = document.querySelector("form");

$scope = angular.element(element).scope();



});

$(document).ready(function(){

$("input:text").datepicker().change(function(e){

$scope.$emit("pickerChange", {key:$(e.currentTarget).attr('name'), value:$(e.currentTarget).val()})

})

$(".trigger").click(function(e){

var input = $("input[type=text]");
input.val('xxx');
input.trigger('input');

})

})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl as app">
<div class="container">
<h3>{{app.name}}</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit et, nulla, voluptates adipisci commodi, itaque ipsam earum hic ipsa qui nam. Itaque nulla, aut quod sit dignissimos explicabo laborum, mollitia!
</div>
<div class="container">
<form novalidate name="form">
<div ng-show="form.date.$dirty">
<div ng-show="form.date.$valid">valid</div>
<div ng-show="form.date.$invalid">invalid</div>
</div>
<input type="text" name="date" ng-model="date" class="form-control" ng-pattern="/[\d|\/]{5,}/" required>
<div ng-show="form.date2.$dirty">
<div ng-show="form.date2.$valid">valid</div>
<div ng-show="form.date2.$invalid">invalid</div>
</div>
<input type="text" name="date2" ng-model="date2" class="form-control" ng-pattern="/[\d|\/]{5,}/" required>
</form>
<div class="btn btn-primary trigger">trigger</div>
</div>
</body>
</html>

触发按钮的原因是我想看看我是否可以使用 jquery 来触发输入并获取 Angular 来更新模型,但这是必要的。

最佳答案

您可以使用 Bootstrap datepicker来自 ui-bootstrap 指令库。它具有 Angular 集成,您可以将纯 Angular 绑定(bind)与 ng-model 结合使用。

关于javascript - 从外部脚本与 angularjs 模型通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33838686/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com