Advertisement
Guest User

AngularJS with shared scope

a guest
May 13th, 2014
239
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <script src="angular.js"></script>
  5.     <script>
  6.         'use strict';
  7.  
  8.         var testApp = angular.module('testApp', []);
  9.  
  10.         testApp.factory('Data', function () {
  11.             return {'foo': ['string', 'Hello Foo'], 'bar_greeting': ['Greeting', 'Hello Bar']};
  12.         });
  13.  
  14.         testApp.controller('dataViewCtrl', function ($scope, Data) {
  15.             $scope.data = Data;
  16.         });
  17.  
  18.         testApp.controller('dataEditorCtrl', function ($scope, Data) {
  19.             $scope.data = Data;
  20.  
  21.             $scope.validation = {};
  22.             $scope.$watch('data', function (newValue, oldValue) {
  23.                 var sync = true;
  24.                 for (var key in newValue) {
  25.                     var value = newValue[key];
  26.                     if (value[0] == 'string') {
  27.                         $scope.validation[key] = true;
  28.                     } else if (value[0] == 'Greeting') {
  29.                         $scope.validation[key] = value[1].indexOf('Hello') == 0;
  30.                         console.log($scope.validation[key], sync);
  31.                         sync = sync && $scope.validation[key];
  32.                     } else {
  33.                         console.log('error');
  34.                     }
  35.                 }
  36.             });
  37.         });
  38.  
  39.     </script>
  40. </head>
  41. <body ng-app="testApp">
  42.  
  43.  
  44. <h2>The Editor</h2>
  45.  
  46. <div ng-controller="dataEditorCtrl">
  47.     <table>
  48.         <tr ng-repeat="(key, value) in data">
  49.             <td>{{ key }}</td>
  50.             <td><input ng-model="value[1]"></td>
  51.             <td ng-if="validation[key]">ok</td>
  52.             <td ng-if="!validation[key]">NOK {{ !validation[key] }}</td>
  53.         </tr>
  54.     </table>
  55. </div>
  56.  
  57.  
  58. <h2>Some View</h2>
  59.  
  60. <div ng-controller="dataViewCtrl">
  61.     <table>
  62.         <tr ng-repeat="(key, value) in data">
  63.             <td>{{ key }}</td>
  64.             <td>{{ value[1] }}</td>
  65.         </tr>
  66.     </table>
  67. </div>
  68.  
  69. </body>
  70. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement