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

时间 2019-11-10

标签 angularjs app.run app run templatecache zippy simple example 栏目 AngularJS 繁體版

原文原文链接

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

<!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.html

1. Simple example
2. Cluster（Simple Example）
3. python simple example
4. Naive Bayes（Simple Example）
5. A Simple MVVM Example[Forward]
6. A Simple OpenGL Shader Example
7. [一] ZMQ-c++ Simple example
8. libnice simple-example 分析
9. VPython - example - A simple Clock
10. Springboot-maven--jpa-simple-example
更多相关文章...
• XSL-FO simple-page-master 对象 - XSL-FO 教程
• PHP wordwrap() 函数 - PHP参考手册