• $compile 手动编译


    angularjs里比较重要但又很少手动调用的要属$compile服务了,通常在写组件或指令时,都是angularjs自动编译完成的,但有时我们可能需要手动编译,比如封装一个table组件,根据参数实现自定义渲染,增加一列复选框或者一列按钮啥的,这是就需要用到$compile了。

    例一:

    <body ng-app="myApp"  ng-controller="MyController">
    </body>
        <script>
            angular.module('myApp', [])
                .controller('MyController', function ($scope, $compile) {
                    //这个this是指控制器MyController
                    var vm = this;
                    vm.msg = 'hello';
                    // 创建编译函数
                    var compileFn = $compile('<p>{{vm.msg}}</p>');
                    // 传入scope,得到编译好的dom对象(已封装为jqlite对象)
                    var $dom = compileFn($scope);
                    // 添加到文档中
                    $dom.appendTo('body');
                    //合起来的写法
                    body.append($compile('<p>{{vm.msg}}</p>')($scope));            
                })
        </script>
     
      通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)。
    编译的实质其实就是对dom对象解析,使dom对象与scope进行耦合,通过绑定可以实现数据的更新,像Vue其实也是一样的过程。
     
     
    例二:
         
    <body ng-controller="MyController as appCtrl">
        <p use="appCtrl.html"></p>
    </body>
     
        <script>
            angular.module('myApp', [])
                .controller('MyController', function ($scope, $compile, $timeout) {
                    var vm = this;
                    vm.html = '<h1>{{title}}</h1>
                                 <ul>
                                      <li ng-repeat="item in items">{{item}}</li>
                                   </ul>'
                })
                .directive('use', function($compile) {
                    return {
                        restrictive:"EA",
                        scope: {
                            use: '='
                        },
                        link: function(scope, elem, attrs) {
                            scope.title = 'list';
                            scope.items = ['list1', 'list2', 'list3'];
                            elem.html($compile(scope.use)(scope))
                        }
                    }
                })
        </script>
     
     

     
  • 相关阅读:
    理解 CSS3中 object-fit
    CSS布局总结(一)
    Webpack 学习记录之概念
    python中深浅拷贝
    Vue中的动画封装
    Vue中的列表过渡
    Vue中多个元素或组件的过渡
    Vue中的Js动画与Velocity.js 的结合
    在Vue中同时使用过渡和动画
    在Vue中使用 animate.css 库
  • 原文地址:https://www.cnblogs.com/yogic/p/8297007.html
Copyright © 2020-2023  润新知