1
我嘗試過所有可以想到的方式來觸發表單的ng模型函數。我正在使用引導日期選擇器。當日期被選中時，我需要引導datepicker來觸發ng-model的值更新，有些人可以告訴我如何使用外部庫或外部事件與ng-model進行交互？與外部腳本中的angularjs模型進行通信
這是我的代碼示例。
這不是很複雜。
/// <reference path="../../typings/tsd.d.ts" />
var app = angular.module("DatePick", []);
var doc = document;
app.controller("AppCtrl", [
\t "$scope", "$q", "$http",
\t function($scope, $q, $http){
\t \t var appCtrl = this;
\t \t
\t \t appCtrl.name = "Jesse App";
\t \t
\t \t $scope.$on("pickerChange", function(evt, data){
\t \t \t
\t \t $scope.$apply(function(){
\t \t \t
\t \t \t $scope.form[data.key] = data.value;
\t \t \t console.log(data);
\t \t })
\t \t
\t \t \t
\t \t })
\t }
]);
var $scope;
doc.addEventListener("DOMContentLoaded", function(e){
\t
\t angular.bootstrap(doc.querySelector("html"), ["DatePick"]);
\t
\t var element = document.querySelector("form");
\t
\t $scope = angular.element(element).scope();
\t
\t
});
$(document).ready(function(){
\t
\t $("input:text").datepicker().change(function(e){
\t \t
\t \t $scope.$emit("pickerChange", {key:$(e.currentTarget).attr('name'), value:$(e.currentTarget).val()})
\t })
\t
\t $(".trigger").click(function(e){
\t \t
\t \t var input = $("input[type=text]");
\t \t input.val('xxx');
\t \t input.trigger('input');
\t \t
\t })
\t
})<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Document</title>
\t <meta name="viewport" content="initial-scale=1, maximum-scale=1">
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css">
\t <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>
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
\t <script src="js/app.js"></script>
</head>
<body ng-controller="AppCtrl as app">
\t <div class="container">
\t \t <h3>{{app.name}}</h3>
\t \t 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!
\t </div>
\t <div class="container">
\t \t <form novalidate name="form">
\t \t \t <div ng-show="form.date.$dirty">
\t \t \t \t <div ng-show="form.date.$valid">valid</div>
\t \t \t \t <div ng-show="form.date.$invalid">invalid</div>
\t \t \t </div>
\t \t \t <input type="text" name="date" ng-model="date" class="form-control" ng-pattern="/[\d|\/]{5,}/" required>
\t \t \t <div ng-show="form.date2.$dirty">
\t \t \t \t <div ng-show="form.date2.$valid">valid</div>
\t \t \t \t <div ng-show="form.date2.$invalid">invalid</div>
\t \t \t </div>
\t \t \t <input type="text" name="date2" ng-model="date2" class="form-control" ng-pattern="/[\d|\/]{5,}/" required>
\t \t </form>
\t \t <div class="btn btn-primary trigger">trigger</div>
\t </div>
</body>
</html>的原因觸發按鈕是，我是想看看我是否能使用jQuery觸發輸入，並得到角更新模型，但它是必要的。
模型激活得很好。你做錯了什麼是'form.date。$ dirty'，'form.date。$ valid'，'form.date。$ invalid'調用。嘗試在HTML中放入'{{date}} {{date2}}'，當你選擇一個日期時你會看到它更新。 – jperezov
好吧，這是有道理的，但我怎麼得到日期和date2在窗體上驗證。這就像角度不知道它，即使我使用$ scope。$ apply（）來確保它知道值已被更改。 – Jesse
將日期選擇器值添加到工廠或服務以便將更新應用於綁定會更有意義嗎？ – Jesse