Phil 1.23.15

9:00 – 5:00 SR

  • Validating that my new, improved inheritance pattern works. Yep!
  • Building a login directive using OO. If that all behaves, then I can get back to scatterplot.
  • Broke apart the set login/password and the check password functions. For the test app, I’m communicating with PHP, since it comes with apache and I don’t have to spend a lot of time switching between Eclipse/Tomcat and Webstorm.
  • Good lord, I’ve completely forgotten how to build a simple directive. Ok, maybe not. What I’m trying to do is make a self-contained directive that will reach out through a couple of objects to a server to set and check a password. The calling page really just needs to know it the directive succeeds. As such, I need to have self contained information in the scope of the directives. After poking around for a while, I discovered that I could declare the variables in the link function, and then refer to them by name using ng-model
  • HTML
<div class="passwordDialog" ng-hide="isValid">
    <form>
        Name: <input type="text" ng-model="name" /><br />
        Password: <input type="text" ng-model="password" /><br />
        <input type="submit" ng-click="checkValues()" value="Check" />
    </form>
    <div>
        <input type="button" value="Click Me" ng-click="isValid = true">
    </div>
</div>
  • Directive JavaScript
function passwordFn(){
   return {
      restrict: 'AE',
      scope: {isValid: '@'}, // all we need to return - passed in from calling page.
      templateUrl: 'directives/passwordDialog.html',
      link: function(scope, element, attr) {
         scope.name = 'unset Name';
         scope.password = 'unset Password';
         scope.checkValues = function(nm,pw){
            console.log('scope.name = '+scope.name);
            //call the server and do tests here. Scope values are visible
         };
      }
   };
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.