angularjs自定义指令在visualforce中不起作用

Question

我是 salesforce 的新手，并试图在 visualforce 页面中实现 angularjs 的自定义指令，但它不起作用。它显示 Salesforce 页面 UI。

请参考下面的代码并建议我该怎么做。

指令：

angular.module('nimbus').directive('customFooter', function () { 返回 { 限制：'E'， templateUrl: 'tpl/footer.html', 控制器：['$scope', '$filter', '$http', '$timeout', 'stats', '$ngBootbox' ,'$templateCache' , '$sce' , '$interval' , footerController], 控制器作为：“页脚控制器” }; });

调用指令：

 <custom-footer></custom-footer>

footer.html

 <footer class="map_data" resizable="true" on-resize="resize($evt, $ui)" handle="n" handle-id="handle" min-height="37" max-height="450" ng-show="showFooter==true">

    <div class="col-md-12">
        <div class="row">
            <div class="head_row">
                <div class="col-md-7">
                    <div class="nav_content">
                        <div class="main_select">
                            <label>Data Source</label>
                            <select class="large" data-ng-model="selectedDs" data-ng-change="dataSourceChanged(selectedDs)">
                                <option ng-repeat="(key, value) in filterSortNumericDs(dbSource)" value="{{key}}">{{key}}</option>
                            </select>
                        </div>
                        <ul>
                            <li ng-hide="selectedDataSource.unmappedData.length==0">

                                <select data-ng-options="md.id as md.value for md in mapData" data-ng-model="selectedMapData" data-ng-change="mapDataChanged()"></select>
                            </li>
                            <li>
                                <label>Summarize by</label>

                                <select class="medium" ng-disabled="selectedDataSource.type == 'Personnel'  " data-ng-options="sd.id as sd.value for sd in summarizeData | filter:{isActive:'true'} " data-ng-model="selectedSummarizeData" data-ng-change="dataLevelChanged()"></select>
                            </li>
                            <li class="paddind_top3">
                                <input name="" type="radio" ng-value="1" ng-model="selectedView" ng-disabled="selectedSummarizeData == 1" ng-change="changeCodeLabel()" />
                                <span class="blue">Code</span>
                            </li>
                            <li class="paddind_top3">
                                <input name="" type="radio" ng-value="2" ng-model="selectedView" ng-disabled="selectedSummarizeData == 1" ng-change="changeCodeLabel()" />
                                <span class="blue">Label</span>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-lg-4 pull-right">
                    <div class="input-group footerSearch">
                        <input type="text" class="form-control" placeholder="{{searchPlaceholder}}" ng-model="searchText" ng-change="refreshData()" />
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button"></button>
                        </span>
                    </div>

                    <div style="display:none;" class="drop_panel" ng-click="toggleFooter()"><a href="#" class="drop_btn"></a></div>



                    <!-- /input-group -->
                    <!-- Drop Bottom -->
                    <!-- <div class="drop_panel"><a href="#" class="drop_btn"></a></div>-->
                </div>

                <div class="col-lg-4 pull-right" ng-show="selectedSummarizeData >= 2  ">
                    <div class="nav_content">
                        <ul style="padding:0px;">
                            <li class="pull-right padding0" style="padding:0px;">
                                <!-- <label>Show</label>
                                <select>
                                    <option>Change</option>
                                </select>
                                <select>
                                    <option>% Change</option>
                                </select> -->
                                <!-- <select>
                                    <option>% Deviation</option>
                                </select> -->

                                <div class="dropdown deviationContainer">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        % Deviation
                                        <span class="caret"></span>
                                    </button>


                                    <ul role="menu" class="dropdown-menu dropdown-menu-right" ng-show="devaitionColumns.length > 0 ">
                                        <li ng-repeat="dc in devaitionColumns">
                                            <label>
                                                <input type="checkbox" ng-model="dc.check" /> {{dc.columnName}}
                                            </label>
                                        </li>
                                    </ul>

                                </div>


                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!-- /input-group -->
                    <!-- Drop Bottom -->
                    <!-- <div class="drop_panel"><a href="#" class="drop_btn"></a></div>-->
                </div>
            </div>
        </div>
    </div>
    <div class="filed_data">

        <!--  <div id="grid1" ui-grid="gridOptions"  ui-grid-tree-view  ui-grid-resize-columns class="grid"></div> -->
        <!--  <div id="myGrid" style="height: 90%;" class="ag-fresh"></div> -->
        <div id="grid1" ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
        <div ag-grid="gridOptionsBottom" class="ag-fresh" style="height: 40px;"></div>



    </div>

    <div id="dataBrowserOverlay" class="dataBrowserOverlay">
        <div class="dbLoaderContainer">
            <div class="DbLoader-spinner"></div>
        </div>
    </div>

</footer> 

输出：

Answer 1

如果您不需要任何销售人员的 UI，请将其放在视觉力量页面的顶部：

<apex:page showChat="false"  sidebar="false" docType="html-5.0" showHeader="false" standaradstylesheets="false" >