Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>angular-scope-types</title>
  </head>
  <body ng-app="app" ng-controller="MainCtrl as vm">
​
    <h1>angular-scope-types</h1>
​
    Example App
​
​
    <scope-typed-dir foo="vm.goodFoo" bar="barString"></scope-typed-dir>
    <scope-typed-dir foo="vm.badFoo" bar="barStrin"></scope-typed-dir>
​
    <script src="https://rawgit.com/kentcdodds/api-check/latest/dist/api-check.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://rawgit.com/alianza-dev/angular-scope-types/master/dist/angular-scope-types.js"></script>
  </body>
</html>
​
 
console.clear();
​
var onProduction = false;
​
// create your apiCheckInstance
var myApiCheck = apiCheck({
  output: {
    prefix: 'Global prefix',
    suffix: 'global suffix',
    docsBaseUrl: 'https://example.com/errors-and-warnings#'
  },
  disabled: onProduction
}, {
  /* custom checkers if you wanna */
});
​
​
// create your angularScopeTypesInstance
var myScopeTypes = angularScopeTypes({
  disabled: onProduction,
  apiCheckInstance: myApiCheck
});
​
​
​
var app = angular.module('app', []);
​
app.controller('MainCtrl', function MainCtrl($timeout) {
  var vm = this;
​
  vm.goodFoo = {
    isFoo: true,
    isBar: false,
    someNum: 32
  };
​
  $timeout(function() {
    vm.badFoo = '';
  }, 1500);
});
​
​
app.constant('scopeTypesDirective', myScopeTypes.directive);
​
app.directive('scopeTypedDir', function(scopeTypesDirective) {
  return scopeTypesDirective({
    template: `
      <div>
        This was scope type checked!
        <div>Passed: {{$scopeTypesResults.__passed}}</div>
        <div>Failed: {{$scopeTypesResults.__failed}}</div>
      </div>
    `,
    scope: {foo: '=', bar: '@'},
    scopeTypes: getScopeTypes
  });
​
  function getScopeTypes(st) {
    return {
      foo: st.shape({
        isFoo: st.bool,
        isBar: st.bool,
        someNum: st.number,
        someOptional: st.object.optional
      }).strict.optional,
      bar: st.oneOf(['fooString', 'barString'])
    };
  }
​
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kentcdoddspro
0viewers