polymer-angular-bind-example/index-solution.html at master · slanted/polymer-angular-bind-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- this is how you turn off shadow dom. just put 'shadydom' in the script below
     For some reason this way doesn't work with web components loader.
     I bet it only knows how to selectively load the polyfills
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-lite.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="bind.js"></script>

<script>
    var module = angular.module('test', ['angularBindPolymer']);
    module.controller("ctrl", ['$scope', function($scope) {
       // do stuff in your controller
    }]);
</script>
<link rel="import" href="phone.html">

<body>
<div ng-app="test" >
    <div ng-controller="ctrl" id="controller">
        <br>
        Angular phone <input ng-model="phone"/>
        <br><br>
        <ns-phone bind-polymer label="Phone" value="{{phone}}" country="US" formatted-value="{{formattedValue}}"></ns-phone>

        <ns-phone bind-polymer label="Phone" value="{{number}}"></ns-phone>

        <ns-phone id="unbound" label="Phone" value="{{phone}}"></ns-phone>
        <br><br>
        <h1>Phone is: {{phone}}</h1>
        <h1>Number is: {{number}}</h1>
        <h1>Formatted Value is: {{formattedValue}}</h1>

        <script>
        </script>
    </div>
</div>

<script>

    var el = document.getElementById('unbound');
    el.addEventListener('value-changed', function() {
        var scope = angular.element(document.getElementById("controller")).scope();
        if(!scope.$$phase) { // if you don't do this, you get a $digest already in progress
            scope.$apply(function() {
                scope.phone = el.value;
            });
        }
    });
</script>

</body>