AI Convergence

1) define objects in the parent for your model, then reference a property of that object in the child: parentObj.someProp

    부모 scope에 object를 정의하면 child scope로 상속 된다. 그러나 primitive type(string, number, boolean)은 상속되지 않는다 

2) use $parent.parentScopeProperty (not always possible, but easier than 1. where possible)

    $parent 의 프로퍼티를 사용한다. 항상 가능하진 않으나 1)번 보다는 쉽다

3) define a function on the parent scope, and call it from the child (not always possible)

    부모 scope에 function을 정의하면 child scope로 상속 된다

1) The following create new scopes, and inherit prototypically: ng-repeat, ng-include, ng-switch, ng-view, ng-controller, directive with scope: true, directive with transclude: true.

    ng-repeat, ng-include, ng-switch는 새로운 scope를 만들고 prototypically를 상속을 한다. 

    즉, scope:true, transclude:true인 directive이다 (새로운 scope를 만들지 않는 것은 scope: false 이다)

2) The following creates a new scope which does not inherit prototypically: directive with scope: { ... }. This creates an "isolate" scope instead.

     prototypically사용을 하지 않고 새로운 scope를 만들려면 scope: {...} 를 정의하여 "isolate" scope를 만들어야 한다

// controller 에서 

$scope.myPrimitive = 50;

$scope.myObject    = {aNumber: 11}; 

// html 에서 

<script type="text/ng-template" id="/tpl1.html">

    <input ng-model="myPrimitive">

</script>

<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">

    <input ng-model="myObject.aNumber">

</script>

<div ng-include src="'/tpl2.html'"></div>

<input ng-model="$parent.myPrimitive">

// controller 에서 

$scope.myArrayOfPrimitives = [ 11, 22 ];

$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

// html 에서 

<ul><li ng-repeat="num in myArrayOfPrimitives">

       <input ng-model="num">

    </li>

<ul>

<ul><li ng-repeat="obj in myArrayOfObjects">

       <input ng-model="obj.num">

    </li>

<ul> 

childScope = scope.$new(); // child scope prototypically inherits from parent scope ...     

childScope[valueIdent] = value; // creates a new childScope property

1) prototypically 상속을 하지 않는다 

2) 재사용 가능한 컴포넌트를 만들 때 사용한다. 즉 컴포넌트가 parent scope의 값을 read/write 못하게 한다

3) 그러나 간혹 parent scope에 접근(access) 하고 싶을 경우 object hash를 사용한다 

    '=' : two way binding (isolate scope <-> parent scope) 

    '@' : one way binding (isolate scope <- parent scope)

    '&' : parent scope expressions 에 바인딩 된다 

4) objec hash는 자신의 directive의 attributes 가 바인딩시에 이용됨을 주의한다 

5) object hash 는 parent scope의 property를 지정 할 수 없다 

    즉, 'parentProp' 가 있을 때 <div my-directives>의 scope: {localProp: '@parentProp'} 지정로 하지 않고, 대신 접근하고 싶다면

    <div my-directives the-Parent-Prop=parentProp>  의 scope: {localProp: '@theParentProp'}로 parent property를 명시해야 한다 (참조 예제)

6) isolate scope 의 attribute 명칭과 parent scope의 property 명칭이 같다면 scope: { attributeName: '=' } 이런식으로 설정함

    틀리면 scope: { keyName1: '@isolateAttributeName', keyName2: '=isolateAttributeName'} 으로 정의함

// html 에서 : attribute 에서 parent scope의 property를 접근한다 

<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">

// directive 에서 : =, @, & 등을 사용하여 parent scope property의 접근 방법을 명시한다 

scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' } 

// directive의 linking function 에서 

scope.someIsolateProp = "I'm isolated" 

attrs.$observe('attr_name', function(value) { ... }

1. <span my-dir="exp"></span>
2. <span class="my-dir: exp;"></span>
3. <my-dir></my-dir>
4. <!-- directive:my-dir exp -->

<a href="img/{{username}}.jpg">Hello {{username}}!</a>

1. var $compile = ...; // injected into your code
2. var scope = ...;
3.  
4. var html = '<div ng-bind="exp"></div>';
5.  
6. // Step 1: parse HTML into DOM element
7. var template = angular.element(html);
8.  
9. // Step 2: compile the template
10. var linkFn = $compile(template);
11.  
12. // Step 3: link the compiled template with the scope.
13. linkFn(scope);

1. Hello {{user}}, you have these actions:
2. <ul>
3. <li ng-repeat="action in user.actions">
4. {{action.description}}
5. </li>
6. </ul>

1. var myModule = angular.module(...);
2.  
3. myModule.directive('directiveName', function factory(injectables) {
4. var directiveDefinitionObject = {
5. priority: 0,
6. template: '<div></div>',
7. templateUrl: 'directive.html',
8. replace: false,
9. transclude: false,
10. restrict: 'A',
11. scope: false,
12. compile: function compile(tElement, tAttrs, transclude) {
13. return {
14. pre: function preLink(scope, iElement, iAttrs, controller) { ... },
15. post: function postLink(scope, iElement, iAttrs, controller) { ... }
16. }
17. },
18. link: function postLink(scope, iElement, iAttrs) { ... }
19. };
20. return directiveDefinitionObject;
21. });

1. var myModule = angular.module(...);
2.  
3. myModule.directive('directiveName', function factory(injectables) {
4. var directiveDefinitionObject = {
5. compile: function compile(tElement, tAttrs) {
6. return function postLink(scope, iElement, iAttrs) { ... }
7. }
8. };
9. return directiveDefinitionObject;
10. });

1. var myModule = angular.module(...);
2.  
3. myModule.directive('directiveName', function factory(injectables) {
4. return function postLink(scope, iElement, iAttrs) { ... }
5. });

///////////////

// @ 사용하기

/*
local scope property html
<div ng-app="drinkApp">
    <div ng-controller="AppCtrl">
        <div drink flavor="strawberry"></div>
    </div>
</div>*/
 
var app = angular.module("drinkApp", []);
 
app.controller("AppCtrl", function($scope) {
    $scope.ctrlFlavor = "blackberry";
})
 
app.directive("drink", function() {
    return {
        scope: {
            flavor: "@"
        },
        template: '<div>{{flavor}}</div>'
        /*
        scope: {flavor: "@"} 표현은 link: function() {...} 과 완전히 동일하다 
        link: function(scope, element, attrs) {
            scope.flavor = attrs.flavor;
        }*/
    }
})


///////////////
// = 사용하기 (소스)
/*
flavor="{{ctrlFlavor}}" 를 사용하지 않음에 주의한다 
 <div ng-app="drinkApp">
     <div ng-controller="AppCtrl">
     Ctrl
     <input type="text" ng-model="ctrlFlavor">
     Dir
     <div drink flavor="ctrlFlavor"></div>
     </div>
 </div>
*/
 
var app = angular.module("drinkApp", []);
 
app.controller("AppCtrl", function($scope) {
    // parent property
    $scope.ctrlFlavor = "blackberry";
})
 
app.directive("drink", function() {
    return {
        scope: {
            flavor: "="
        },
 // local property 
        template: '<input type="text" ng-model="flavor"> '
    }
})


///////////////
// & 사용하기 (소스)
/*
 message를 controller parent scope로 전달 이는 scope가 isolated되어 있어도 상위로 값을 전달 할 수 있게 한다
 <div ng-app="phoneApp">
     <div ng-controller="AppCtrl">
     <div phone dial="callHome(message)"></div>
     <div phone dial="callHome(message)"></div>
     </div>
 </div>
*/
 
var app = angular.module("phoneApp", []);
 
app.controller("AppCtrl", function($scope) {
    $scope.callHome = function(message) {
        alert(message);
    }
})
 
app.directive("phone", function() {
    return {
        scope: {
            dial: "&"
        },
 // {message:value} 객체를 통하여 contrller scope의 callHome에 전달 
        template: '<input type="text" ng-model="value">' +
            '<div class="button" ng-click="dial({message:value})">Call Home</div> '
    }
})


/////////////////////////
// @, =, & 종합 사용하기 (소스)
/*
 @, &, = integration scope
 <div ng-app="phoneApp">
 <div ng-controller="AppCtrl">
 <phone number="1111111" network="network" make-call="leaveVoicemail(number, message)"></phone>
 <phone number="2222222" network="network" make-call="leaveVoicemail(number, message)"></phone>
 <phone number="3333333" network="network" make-call="leaveVoicemail(number, message)"></phone>
 
 </div>
 </div>
*/
 
var app = angular.module("phoneApp", []);
 
app.controller("AppCtrl", function($scope) {
    $scope.leaveVoicemail = function(number, message) {
        alert("Number: " + number + " said: " + message);
    }
})
 
app.directive("phone", function() {
    return {
        restrict: "E",
        scope: {
            number: "@",  // local scope property
            network: "=", // bi-directional binding between local property and parent property
            makeCall: "&" // send expressions to parent scope
        },
        template: '<div class="panel">Number: {{number}} Network:<select ng-model="network" 
ng-options="network for network in networks">' +
            '</select></div><input type="text" ng-model="value">' +
            '<div class="button" ng-click="makeCall({number: number, message:value})">
Call Home</div> ',
        link: function(scope) {
            scope.networks = ["KT", "SKT", "LGU+"];
            scope.network = scope.networks[0];
        }
    }
})

• E - Element name: <my-directive></my-directive>
• A - Attribute: <div my-directive="exp"> </div>
• C - Class: <div class="my-directive: exp;"></div>
• M - Comment: <!-- directive: my-directive exp -->

function compile(tElement, tAttrs, transclude) { ... }

function link(scope, iElement, iAttrs, controller) { ... }

1. function linkingFn(scope, elm, attrs, ctrl) {
2. // get the attribute value
3. console.log(attrs.ngModel);
4.  
5. // change the attribute
6. attrs.$set('ngModel', 'new value');
7.  
8. // observe changes to interpolated attribute
9. attrs.$observe('ngModel', function(value) {
10. console.log('ngModel has changed value to ' + value);
11. });
12. }

1. <div>
2. <button ng-click="show=true">show</button>
3. <dialog title="Hello {{username}}."
4. visible="show"
5. on-cancel="show = false"
6. on-ok="show = false; doSomething()">
7. Body goes here: {{username}} is {{title}}.
8. </dialog>
9. </div>

1. <div ng-show="visible">
2. <h3>{{title}}</h3>
3. <div class="body" ng-transclude></div>
4. <div class="footer">
5. <button ng-click="onOk()">Save changes</button>
6. <button ng-click="onCancel()">Close</button>
7. </div>
8. </div> 

1. transclude: true,
2. scope: {
3. title: '@', // the title uses the data-binding from the parent scope
4. onOk: '&', // create a delegate onOk function
5. onCancel: '&', // create a delegate onCancel function
6. visible: '=' // set up visible to accept data-binding
7. },
8. restrict: 'E',
9. replace: true

/*
 Simple transclude sample dom
 <div ng-app="phoneApp">
     <div ng-controller="AppCtrl">
         <panel>
            <div class="button">Click me!</div>
         </panel>
     </div>
 </div>
*/
 
var app = angular.module("phoneApp", []);
 
app.controller("AppCtrl", function($scope) {
 
})
 
// transclude: true와 <div ng-transclude를 설정하지 않으면 DOM의 <div class="button"이 안보이고 
// template의 내용만 보이게 된다. template 내용안에 DOM 의 button class가 같이 보이게 하기 위한 방법
 > 버튼이 안보임
  

 > transclude 설정으로 버튼이 보임
  

app.directive("panel", function() {
    return {
        restrict: "E",
        transclude: true,
        template: '<div class="panel" ng-transclude>This is a panel component</div>'
    }
})