Chapter 19, $compile (Pro AngularJS)

by js_test

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<body ng-app="exampleApp" ng-controller="defaultCtrl">
    <div class="well">
<span eval-expression></span>

    </div>
</body>

JavaScript

var exampleApp = angular.module("exampleApp", []);

exampleApp.controller("defaultCtrl", function ($scope) {
    $scope.cities = ["London", "Paris", "New York"];
});

exampleApp.directive("evalExpression", function ($compile) {
    return function (scope, element, attrs) {
        var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>",
            listElem = angular.element(content),
            compileFn = $compile(listElem);

        compileFn(scope);
        element.append(listElem);
    }
});