Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="//rawgit.com/kentcdodds/apiCheck.js/7.0.0/dist/api-check.js"></script>
  </head>
  <body ng-app="app" ng-controller="MainCtrl as vm">
    <h1>
      scopeTypes
    </h1>
    <p>
      Discuss this <a href="https://github.com/angular/angular.js/issues/11657">here</a>
    </p>
    <p>
      This is simply a suggested API for a "propTypes" for Angular using <a href="https://github.com/kentcdodds/apiCheck.js">apiCheck.js</a>. Would love to be able to do this.
      See the directive definition object with the "scopeTypes" property. I think the ability to easily enforce your API
      would be really nice.
    </p>
    <p>
      If we don't want to build this into angular, could someone at least show me how I could do this without having to
      wrap my DDO in "apiCheckDirective"?
    </p>
    <p>
      See the console for what the error message would look like. This comes from apiCheck and could be improved obviously :-)
      I'm more interested in getting the concept accepted than using apiCheck.
    </p>
    <hr />
    Good User
    <user-card user="vm.goodUser"></user-card>
    
    <hr />
    Bad User
    <user-card user="vm.badUser"></user-card>
    
    <script type="text/ng-template" id="user-card.html">
      <pre>{{user | json}}</pre>
      <div ng-if="apiCheck.results.failed">
        <span style="color:red">APICheck Failure!</span>
        <pre>{{apiCheck.results | json}}</pre>
      </div>
      <div ng-if="apiCheck.results.passed">
        <span style="color:green">APICheck Success!</span>
      </div>
    </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
kentcdoddspro
0viewers