Angular: Empty Fiddle

http://angularjs.org/

by provegard

HTML

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div my-directive data-ng-numbers="nums" class="foo"></div>
    <button type="button" ng-click="double()">Double</button>
    <div>{{nums}}</div>
</div>

CSS

.foo {
    background-color: yellow;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function() {
    return {
        scope: true,
        replace: true,
        template: "<div><span ng-repeat='num in numbers' ng-style='getStyle()'>{{num}}</span></div>",
        link: function (scope, element, attrs) {
            var model = scope.$eval(attrs.ngNumbers);
            scope.numbers = model;
            scope.getStyle = function() {
                return { border: "1px solid black" };
            };
        }
    };
});


function MyCtrl($scope) {
    $scope.nums = [1, 4, 2];
    $scope.double = function() {
        var temp = $scope.nums.concat();
        $scope.nums.length = 0;
        for (var i = 0; i < temp.length; i++) {
            $scope.nums.push(temp[i] * 2);
        }
    };
}