AngularJS外部函式動態呼叫實踐
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"
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:initAngularthat.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:configAngularSvrthat.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.方法1for (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:bindthat.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)
3. 演示
