####Objective####

1. Example of showing directive accesses service (factory).
2. Example of ng-src

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/qGAvEtXmkJ3opTRvZUMQ" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

1
2
3
4
5

Avatar url : <input type="text" ng-model="url" placeholder='input url'/>
<div> result:
    <img my-avatar/>
</div>

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

var app = angular.module('myApp', [])
    .factory('CurrentUserService', function () {
        "use strict";
        var user = {
            avatarUrl: ''
        }, srv = {};
        srv.getCurrentUser = function () {
            return user;
        };
        return srv;
    }).directive('myAvatar', function () {
        "use strict";
        return {
            restrict: 'A',
            replace: true,
            template: '<img class="avatar" ng-src="" alt="" title=""> ',
            controller: function ($scope, CurrentUserService) {
                $scope.url = CurrentUserService.getCurrentUser().avatarUrl;
            }
        };
    });
    app.controller('MainCtrl', ['$scope', 'CurrentUserService', function ($scope, CurrentUserService) {
        "use strict";
        CurrentUserService.getCurrentUser().avatarUrl = $scope.url;
    }]);

####Objective####

1. Show the different between Controller and Directive
2. Example of using instance [attributes][0] with watch in link function in directive

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/84NRZHlGeL3LqS4XgTGY" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class='row'>
    <span class='span4'>
      controller version
    </span>
    <span class='span8'>
      <input type="checkbox" id='checkbox' ng-model="isChecked">
      <input type="text" id="name">
    </span>
</div>
<div class='row'>
    <span class='span4'>
      directive version
    </span>
    <span class='span8'>
      <input type="checkbox" ng-model="isChecked2">
      <input type="text" xng-focus='isChecked2'>
    </span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 
var app = angular.module('ngApp', [])
    .directive('xngFocus', function () {
        "use strict";
        return function (scope, element, iattrs) {
            scope.$watch(iattrs.xngFocus,
                function (newValue) {
                    newValue && element.focus();
                }, true);
        };
    });
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.$watch('isChecked', function (newV) {
        newV && $('#name').focus();
    }, true);
}]);

####Objective####

1. Example of ng-required
2. Example of using instance attributes in link function in directive
3. Example of having key:element mapping attribute

<!-- more --> <iframe style="margin: 20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/83wZy086dHDl1r9EDAcS" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

1
2
3
4
5
6
7

<form ng-submit="submit()" name="form">
    <input type="checkbox" ng-model="partner" checked/>
    Are you bringing along a partner?<br/>
    Partner name:
    <input type="text" ng-model="partnerName" xng-placeholder="{ 'required': partner }" ng-required="partner"/> <br/>
    <input type="submit" value="save" ng-disabled="form.$invalid" class="btn"/>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

app.directive('xngPlaceholder', function () {
    'use strict';
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.xngPlaceholder, function (newVal) {
                element.removeAttr('placeholder');
                var att = '';
                angular.forEach(newVal, function (elm, key) {
                    att += elm ? (key + ' ') : '';
                });
                element.attr('placeholder', att);
            }, true);
        }
    };
});

####Objective:####

1. Example for using filter to set order by certain column with tab UI.
2. Exampe for using ng-class to switch twitter bootstrap tabs.

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/fMrhagVKl2nehzTOHriF" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<body ng-controller="MainCtrl">
<ul class="nav nav-pills">
    <li ng-class="{'active': order=='name'}">
        <a href="#" ng-click="setOrder('name')">name</a>
    </li>
    <li  ng-class="{'active': order=='phone'}">
        <a href="#" ng-click="setOrder('phone')">phone</a>
    </li>
</ul>
<ul>
    <li data-ng-repeat="friend in friends|orderBy:order">
        <span class="name"></span>
        <span class="phone"></span>
    </li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.order = 'name';
    $scope.friends = [
        {name: 'John', phone: '555-1276'},
        {name: 'Mary', phone: '800-BIG-MARY'},
        {name: 'Mike', phone: '555-4321'},
        {name: 'Adam', phone: '555-5678'},
        {name: 'Julie', phone: '555-8765'}
    ];
    $scope.setOrder = function (order) {
        $scope.order = order;
    };
}]);

One of the highlight feature of Octopress is Code block

It can let you share the code with syntax highlight easily.

However, it doesn't work on my Windows 7 machine.

It always throw out the following error

<!-- more -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$ rake generate
## Generating Site with Jekyll
unchanged sass/screen.scss
Configuration from d:/MyProject/Git/octopress/_config.yml
Building site: source -> public
Liquid Exception: No such file or directory - python c:/Ruby193/lib/ruby/gems/1.9.1/gems/pygments.rb-0.3.7/lib/pygments/mentos.py in 2013-01-06-octopress.markdown
c:/Ruby193/lib/ruby/gems/1.9.1/gems/posix-spawn-0.3.6/lib/posix/spawn.rb:162:in 'spawn'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/posix-spawn-0.3.6/lib/posix/spawn.rb:162:in 'spawn'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/posix-spawn-0.3.6/lib/posix/spawn.rb:307:in 'popen4'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/pygments.rb-0.3.7/lib/pygments/popen.rb:41:in 'start'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/pygments.rb-0.3.7/lib/pygments/popen.rb:203:in 'mentos'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/pygments.rb-0.3.7/lib/pygments/popen.rb:192:in 'highlight'
d:/MyProject/Git/octopress/plugins/pygments_code.rb:24:in 'pygments'
d:/MyProject/Git/octopress/plugins/pygments_code.rb:14:in 'highlight'
d:/MyProject/Git/octopress/plugins/code_block.rb:82:in 'render'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.3.0/lib/liquid/block.rb:94:in 'block in render_all'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.3.0/lib/liquid/block.rb:92:in 'collect'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.3.0/lib/liquid/block.rb:92:in 'render_all'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.3.0/lib/liquid/block.rb:82:in 'render'
c:/Ruby193/lib/ruby/gems/1.9.1/gems/liquid-2.3.0/lib/liquid/template.rb:124:in 'render'

I followed exactly the steps of installation that I found. No one mentions this problem.

Moreover, I can't find anyone else having this issue.

I guess I am on my own.

First I need to figure out how Octopress does this feature.

It seems like Octopress use Pygments from this error message.

So I tried to update pyments to the latest version. But it doesn't work.

Then I found out Pygments uses Python to work.

And I didn't have Python installed.

Well, I guess that should be it.

But thing doesn't seem like that easy. It still doesn't work after I installed Python 2.7 / 3.3.

After hours and hours thinking, I noticed I can't run Python beside its folder.

OMG ! It is PATH !

After I add correct path to windows environment, IT STILL REFUSED WORK.

I entered path in the cmd. It doesn't show the path I just added.

Apparently, I need to reboot my machine to get it to work.

(another way is use SET PATH=%PATH%;C:\pathoftheprogram to avoid reboot.)

Finally ! It works like a charm after reboot.

1
2
3
4

function helloWorld()
{
    alert("Hello World!");
}