AngularJS外部函数动态调用实践

最新推荐文章于 2021-06-05 11:01:13 发布

kikop_freedom

最新推荐文章于 2021-06-05 11:01:13 发布

阅读量2.4k

点赞数

本文介绍如何在AngularJS中实现动态组件创建及从外部JavaScript文件调用Angular控制器中的方法。通过具体实例展示了如何利用$apply()方法确保DOM更新，实现数据的双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS外部函数动态调用实践

1.angular js 中$apply()的使用

angular js的双向数据绑定，在开发中起到的作用灰常大，但是，并不是所有时候都能起作用。双向数据绑定其实也就是当模型发生了变化的时候，重绘了DOM，使你看到数据被更新了，引发模型变化的情况有：

1,dom事件；

2,xhr响应触发回调；

3,浏览器的地址变化；

4,计时器触发回调；

以上的某一个情况发生，都会触发模型监控机制，同时调用了$apply方法，重绘了dom;通常情况下，我们使用的一些指令或服务，如$http,$timeout,$location等都会调用$apply方法，从而使用dom被重绘，数据得到更新，实现了双向数据绑定。

而在有些情况下，比如回调里，回调函数里执行的方法被不会触发$apply方法。假如当你点击打了比较input select radio等等，触发了模型监控，值也随之更新了。

此时需要手动调$scope方法，使dom重绘。

2. 实例

2.1.Html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>skill-study</title>

    <script type="text/javascript" src="../../openjs/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript" src="../../openjs/libs/angular/js/angular.min.js"></script>
    <script type="text/javascript" src="../../openjs/libs/angular/js/angular-route.min.js"></script>

    <script type="text/javascript" src="../../skilljs/angular-action/myangular_dynamic02.js"></script>

    <link rel="stylesheet" type="text/css" href="../../skilljs/angular-action/myangular.css"/>

    <script type="text/javascript">

        /**
         * 动态组件创建功能测试
         */
        function createDynamicComponent() {
            console.log('createDynamicComponent');
            var requestParams = {};
            requestParams.reqDomid = 'MainTrackDiv';
            requestParams.reqApp = 'actionApp';
            requestParams.reqController = 'actionController';

            mytrackcomponents.createDynamicComponent(requestParams);
        }

        /**
         * 外部js调用Angular控制器中的方法
         */
        function callAngularFunc() {
            console.log('callAngularFunc');
            mytrackcomponents.callAngularFunc();
        }
    </script>

</head>

<body>

<input type="button" value="动态组件创建功能测试" onclick="createDynamicComponent()">

<input type="button" value="外部js调用Angular控制器中的方法" onclick="callAngularFunc()">


<div id="MainTrackDiv" class="MainTrackDiv">

    
        
            
                
                

                
                    
                    
                    
                

                
                

            
        
    

</div>

</body>
</html>

2.2.JS

/**
* Created by kikop on 2018/3/2.
*/

var mytrackcomponents = mytrackcomponents || {};

(function () {

    var globalreqController = null;
    this.createDynamicComponent = function (requestParams) {

        var that = this;
        var componentContainer;

        var reqDomid = requestParams.reqDomid;
        var reqApp = requestParams.reqApp;
        var reqController = requestParams.reqController;
        globalreqController = reqController;

        //step1:initAngular
        that.initAngular = function () {

            componentContainer = document.createElement("DIV");
            componentContainer.innerHTML = '    <ul ng-repeat="target in mytrackDatas">                           ' +
                '        <li>                                                          ' +
                '            <div>                                                     ' +
                '                <span>{{target.name}}</span>                          ' +
                '                <div>{{target.status}}</div>                          ' +
                '                                                                      ' +
                '                <div ng-switch on="{{target.status}}">                ' +
                '                    <div ng-switch-when="1">Settings 1</div>          ' +
                '                    <div ng-switch-when="2">Settings 2</div>          ' +
                '                    <div ng-switch-default>Setting default</div>      ' +
                '                </div>                                                ' +
                '                                                                      ' +
                '                <div ng-show="target.status==1">1</div>               ' +
                '                <div ng-show="target.status!=1">2</div>               ' +
                '                                                                      ' +
                '            </div>                                                    ' +
                '        </li>                                                         ' +
                '    </ul>                                                             ';

            document.getElementById(reqDomid).appendChild(componentContainer);

        }

        //step2:configAngularSvr
        that.configAngularSvr = function () {

            //1.设置交互
            var actionApp = angular.module(reqApp, []);
            actionApp.controller(reqController, ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) {
                console.log('init actionController!');

                //模拟数据绑定
                $scope.mytrackDatas = [
                    {name: "kikop1", status: 1},
                    {name: "kikop2", status: 2},
                ];

                $scope.$on('$viewContentLoaded', function () {
                    console.log('页面加载完成');
                });

                $scope.updateSpecialTrackDatasByName = function (name) {

//1.方法1
                    for (var i = 0; i < $scope.mytrackDatas.length; i++) {
                        if ($scope.mytrackDatas[i].name == name) {
                            $scope.mytrackDatas[i].status = 2;
                            $scope.$apply();
                            break;
                        }
                    }
                    //2.方法2
                    $scope.$apply(function () {
                        for (var i = 0; i < $scope.mytrackDatas.length; i++) {
                            if ($scope.mytrackDatas[i].name == name) {
                                $scope.mytrackDatas[i].status = 2;

                                break;
                            }
                        }
                    })

                }
            }]);

        }
        //step3:bind
        that.bindDomApp = function () {
            document.body.setAttribute("ng-controller", reqController);
            angular.bootstrap(document.body, [reqApp]);
        }

        that.initAngular();
        that.configAngularSvr();
        that.bindDomApp();

        return componentContainer;

    }

    this.callAngularFunc = function () {

        //1.通过controller获取Angular应用
        var appElement = document.querySelector('[ng-controller=' + globalreqController + ']');

        //2.获取scope变量
        var $scope = angular.element(appElement).scope();
        $scope.updateSpecialTrackDatasByName('kikop1');
    }

}).apply(mytrackcomponents)