Question

我创建了一个指令，因为我想在页面加载时进行一些DOM操作。但它只是不会触发。这是我的指令功能：的指令

function onLoadFixes(){
    return function (scope,element,attrs){
        $(element).on('load',function(event){
                console.log("element loaded");
                $(".breadcrumb-igdm").append($("#idBreadcrumbs").children());
                $("input").val(copyURLtoClipboard());
        });}
}

这就是它的映射方式

.directive("uponLoadFixes", onLoadFixes)

HTML

<header class="header" ng-include="'partials/header.html'">
</header>
<div id="idBreadcrumbs" ng-show="false">
    <li class="active">{{phase.title}}</li>
</div>
<div role="main" style="margin-top:110px">
    <a role="button" href="javascript:;" ng-model="collapsedMap" ng-click="collapsedMap=!collapsedMap">
        <h4 style="color: #7D0DD0;">PROJECT PHASE {{phase.title}}</h4>
    </a>
    <div id="divMap" style="border: 1px solid grey;width: 98%;border-radius: 4px;padding:3px">
    <upon-load-fixes></upon-load-fixes>
        <table ng-show="collapsedMap" style="width:100%">
            <tbody>
                <tr ng-repeat="stream in streams|myMapFilter:'order'" style="height: 30px">
                    <td ng-style="{'width':'20%','padding-top':'1px'}" class="phase-stream-column-div">
                        <div ng-style="{'background-color':stream.color,'margin-top':'2px'}" class="content-center-flex">
                            {{stream.title}}</div>
                    </td>
                    <td class="phase-stream-column-div" style="padding-left: 2px !important;padding-top:2px !important">
                        <div ng-style="{'background-color':stream.color,'cursor':'pointer'}" ng-repeat="stage in stages(stream.ukey).stages" ui-sref="stage" ng-click="openStage(stage)" class="content-center-flex">
                            {{stage.title}}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

欢迎提出任何指示。

header.html中

<div class="navbar navbar-fixed-top">
    <table class="table" style="width: 100%;margin-bottom: 0px;background-color: white" role="presentation">
        <tbody>
            <tr style="border-bottom-style: solid; border-bottom-color: rgb(192, 192, 192)">
                <td style="width: 10.0%;"><img alt="" src="img/iGDM_119_50.jpg"></td>
                <td style="background-color: rgb(0, 64, 128)"><span style="text-align: left;vertical-align: "><span
                style="nowrap: nowrap; width: 100%; text-align: right; font-weight: bold; color: rgb(255, 255, 255); font-size: 16pt"
            >Page Name</span> </span>
                </td>
                <td style="width: 10.0%;"><img alt="" src="img/hcl_logo_50.jpg"></td>
            </tr>
        </tbody>
    </table>
    <div style="height: 30px;background-color: #f5f5f5;border-bottom: 1px solid grey;">
        <ol class="breadcrumb pull-left breadcrumb-igdm">
            <li><a href="#"><i class="fa fa-home" style="font-weight: 16px"></i>&nbsp;Home</a></li>
            <li><a href="#">Waterfall</a></li>
            <upon-load-fixes></upon-load-fixes>
        </ol>
        <ul class="list-inline pull-right breadcrumb">

            <li ngclipboard data-clipboard-target="#copyurl">
            <input type="text" id="copyurl" value=""><a href="javascript:;"><i class="fa fa-link" style="font-weight: 16px"></i>&nbsp;Copy URL</a></li>
            <li ng-click="open()"><a href="#"><i class="fa fa-comment-o" style="font-weight: 16px"></i>&nbsp;Feedback</a></li>
            <li><a href="#"><i class="fa fa-question-circle" style="font-weight: 16px"></i>&nbsp;Help</a></li>
        </ul>

    </div>
</div>

新指令

( function(angular) {
    'use strict';

    var uponLoadFixes = function() {
        function controller() {

        }

        function link(scope, element, attrs) {
            console.log("doing something " + copyURLtoClipboard());
            element.append(angular.element(document.querySelector("#idBreadcrumbs")).children());
            angular.element(document.querySelector("#copyurl")).val(copyURLtoClipboard()); // get this function into the directive as well or make it a service

        }

        return {
            restrict : 'E',
            link : link,
            controller : controller,
            scope : {}
        };
    };

    angular.module('myMappy').directive('uponLoadFixes', [ uponLoadFixes ]);
})(angular);

Answer 1

您不必在angularjs中使用load事件，

这是一个例子，你应该尝试遵循，

(function (angular) {
        'use strict';

        var uponLoadFixes = function () {
            function controller() {

            }

            function link(scope, element, attrs) {
                //here do something
                var $$breadcrumb = element.find('.breadcrumb-igdm'); //try to fin the element with angularjs
                $$breadcrumb.append($("#idBreadcrumbs").children());
                $("input").val(copyURLtoClipboard());  //get this function into the directive as well or make it a service
            }

            return {
                restrict: 'E',
                link: link,
                controller: controller,
                scope: {}
            };
        };

        angular.module('')
                .directive('uponLoadFixes', [uponLoadFixes]);
    })(angular);

Answer 2

运行块 运行块是Angular中与main方法最接近的东西。运行块是需要运行以启动应用程序的代码。在配置完所有服务并创建注入器后执行。

  angular.module('myModule', []).      
    run(function(injectables) { // instance-injector
      // This is an example of a run block.
      // You can have as many of these as you want.
      // You can only inject instances (not Providers)
      // into run blocks
    });

https://docs.angularjs.org/guide/module

Answer 3

感谢z.a 。通过将我的指令移动到header.html中的痕迹导航列表并将其用作元素，它开始按预期工作（虽然需要修复显示）。如果有人正在寻找它，我已经包含了指令的修改代码（用于元素选择）。

AngularJS - 我想在加载时调用此指令有什么问题

3 个答案: