提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

[AngularJS] app.run($templateCache) -- zippy simple example

App -- angularjs run Simple Example
2023-09-14 08:59:21 时间

功能》点击title, 可以切换Content的显示/隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>templateCache</title>
    <link href="foundation.min.css" rel="stylesheet"/>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app">
    <input type="text" ng-model="zippy.title" />
    <input type="text" ng-model="zippy.content" />
    <zippy title="{{zippy.title}}">
        This is content : {{zippy.content}}
    </zippy>
</body>
</html>
var app = angular.module("app", []);

app.run(function($templateCache) {
  $templateCache.put("zippy.html", '<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisible" ng-transclude></div></div>');
});

app.directive('zippy',function(){
    return{
        restrict: 'E',
        scope:{title: '@'},
        transclude: true,
        templateUrl: 'zippy.html',
        link:function(scope){
            scope.isContentVisible = false;
            scope.toggleContent = function(){
                scope.isContentVisible = !scope.isContentVisible;
            }
        }
    }
});

run会在所有angular models加载完毕后加载，适合在里面定义一些tempalte.

相关文章