dangerouse · March 31, 2020 23:58
diff --git a/cloudsponge-angular.js b/cloudsponge-angular.js
 <!DOCTYPE html>
 <html ng-app="cloudspongeApp">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>CloudSponge Example using AngularJS</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
    window.csPageOptions = {
      // configure the widget for a friendlyer mobile interface
      mobile_render: true,
      inlineOauth: 'mobile',

      // pass the full address book to the contactListCtrl
      beforeDisplayContacts:function(contacts, b, c) {
        // obtain access to the ContactListCtrl's scope
        var scope = angular.element(document.getElementById('ContactListCtrl')).scope();
        scope.$apply(function() {
          scope.fullAddressbook = contacts;
        });
      },
      // pass only the selected contacts to the contactListCtrl
      afterSubmitContacts: function(contacts){
        // obtain access to the ContactListCtrl's scope
        var scope = angular.element(document.getElementById('ContactListCtrl')).scope();
        scope.$apply(function() {
          scope.contacts = contacts;
        });
      }
    };

    // Asynchronously include the widget library.
    // TODO: replace with your own WIDGET_SCRIPT
    (function(u){
      var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
      a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
    })('https://api.cloudsponge.com/widget/localhost-only.js');

    // initialize the angular app
    angular.module('cloudspongeApp', [])
      .controller('ContactListCtrl', function($scope) {
        // contacts is the array of selected contacts
        $scope.contacts = [];
        // fullAddressbook is the array of all contacts in the user's address book
        $scope.fullAddressbook = [];
      });
    </script>
  </head>
  <body>

    <div class="container-fluid">

      <div class="row">
        <div class="col-md-12">
          <!-- Any link with a class="cs_import" will start the import process -->
          <a class="cs_import btn btn-default">Add from Address Book</a>
        </div>
      </div>

      <div class="row">
        <div id="ContactListCtrl" ng-controller="ContactListCtrl">

          <div ng-if="contacts.length>0">
            <div class="col-md-6">
              <h3>Selected Contacts</h3>
              <ul class="unstyled">
                <li ng-repeat="contact in contacts">
                  {{contact.fullName()}} &lt;{{contact.selectedEmail()}}&gt;
                </li>
              </ul>
            </div>
          </div>

          <div class="col-md-6">
            <div ng-if="fullAddressbook.length>0">
              <h3>All Imported Contacts</h3>
              <ul class="unstyled">
                <li ng-repeat="contact in fullAddressbook">
                  {{contact.fullName()}}
                  <span ng-if="contact.primaryEmail().length>0">
                    &lt;{{contact.primaryEmail()}}&gt;
                  </span>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>

    </div>

  </body>
 </html>
	<!DOCTYPE html>
	<html ng-app="cloudspongeApp">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>CloudSponge Example using AngularJS</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
	<script>
	window.csPageOptions = {
	// configure the widget for a friendlyer mobile interface
	mobile_render: true,
	inlineOauth: 'mobile',

	// pass the full address book to the contactListCtrl
	beforeDisplayContacts:function(contacts, b, c) {
	// obtain access to the ContactListCtrl's scope
	var scope = angular.element(document.getElementById('ContactListCtrl')).scope();
	scope.$apply(function() {
	scope.fullAddressbook = contacts;
	});
	},
	// pass only the selected contacts to the contactListCtrl
	afterSubmitContacts: function(contacts){
	// obtain access to the ContactListCtrl's scope
	var scope = angular.element(document.getElementById('ContactListCtrl')).scope();
	scope.$apply(function() {
	scope.contacts = contacts;
	});
	}
	};

	// Asynchronously include the widget library.
	// TODO: replace with your own WIDGET_SCRIPT
	(function(u){
	var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
	a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
	})('https://api.cloudsponge.com/widget/localhost-only.js');

	// initialize the angular app
	angular.module('cloudspongeApp', [])
	.controller('ContactListCtrl', function($scope) {
	// contacts is the array of selected contacts
	$scope.contacts = [];
	// fullAddressbook is the array of all contacts in the user's address book
	$scope.fullAddressbook = [];
	});
	</script>
	</head>
	<body>

	<div class="container-fluid">

	<div class="row">
	<div class="col-md-12">
	<!-- Any link with a class="cs_import" will start the import process -->
	<a class="cs_import btn btn-default">Add from Address Book</a>
	</div>
	</div>

	<div class="row">
	<div id="ContactListCtrl" ng-controller="ContactListCtrl">

	<div ng-if="contacts.length>0">
	<div class="col-md-6">
	<h3>Selected Contacts</h3>
	<ul class="unstyled">
	<li ng-repeat="contact in contacts">
	{{contact.fullName()}} <{{contact.selectedEmail()}}>
	</li>
	</ul>
	</div>
	</div>

	<div class="col-md-6">
	<div ng-if="fullAddressbook.length>0">
	<h3>All Imported Contacts</h3>
	<ul class="unstyled">
	<li ng-repeat="contact in fullAddressbook">
	{{contact.fullName()}}
	<span ng-if="contact.primaryEmail().length>0">
	<{{contact.primaryEmail()}}>
	</span>
	</li>
	</ul>
	</div>
	</div>

	</div>
	</div>

	</div>

	</body>
	</html>