Angular+JQ+Bootstrap

by supatwo

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    initValue = {{initValue}} <br>
    value = {{value}}
    <br />
    <button ng-click="add()">Click me to add a directive that changes value</button>
</div>

JavaScript

//forked from Andy Joslin's fiddle
//demo difference between no scope, new scope, and isolated scope
var app = angular.module('myApp', []);

function MyCtrl($scope, $element, $compile) {
    $scope.value = 3;
    
    $scope.add = function() {
        $element.append($compile('<my-directive></my-directive')($scope));
    };
}
                    
app.directive('myDirective', function() {
    return {
        
        scope:false,            
        scope : true,
        scope:{},
        restrict: 'E',
        link: function(scope, elm, attrs) {
            scope.initValue = scope.value;
            if(scope.value) {
                scope.value = scope.value + 1;
            }
            else{   
                scope.value = 443532;
            }
        },
        template : '<div>Init Value = {{initValue}}, Value =  {{value}} </div>'
    };
});