html - 使用 div id 参数作为 html 标签

Question

我是前端开发的新手。这是 Angular Material 。 我正在尝试从父级访问其他 hmtl 中的 div 元素。 我正在尝试做什么。

div.html

<div id="myDiv">
    <h1>My work in progress</h1>
</div>

ma​​in.html

<div layout="row" id="chart-section">
<div flex="20" >
  <myDiv />     
</div>    

我在同一个应用程序中使用它。

ma​​in_controller.js

(function ()
{
    'use strict';
    angular
        .module('app.chart')
        .component('chartSection', chartSectionComponent());

    /** @ngInject */
    function chartSectionComponent() {
        return {
            templateUrl: 'app/main/apps/chart/components/chart-section/chart-section.html',
            controller: chartSectionController
        }
    }

    /** @ngInject */
    function chartSectionController() {         
    }       
})();

myDivController.js

(function ()
{
  'use strict';

  angular
    .module('app.chart')
    .component('in-progress', inProgressComponent());

  /** @ngInject */
  function inProgressComponent() {
    return {
      templateUrl: 'app/main/apps/chart/components/in-progress/in-progress.html',
      controller: inProgressController
    }
  }

  /** @ngInject */
  function inProgressController(chartService, $log) {

  }
})();

ma​​in-module.js

(function ()
{
    'use strict';

    angular
        .module('app.chart', [])
        .config(config);

    /** @ngInject */
    function config($stateProvider, $translatePartialLoaderProvider)
    {
        // State
        $stateProvider.state('app.restricted.chart', {
            url      : '/chart/:chartId',
            views    : {
                'content@app': {
                    template: '<chart />'
                }
            },
            params: {
                chart: null
            }
        });

        // Translation
        $translatePartialLoaderProvider.addPart('app/main/apps/chart');
    }
})();

我正在使用这个主题 http://fuse-angular-material.withinpixels.com/dashboard-project 我该如何实现？谢谢。

Answer 1

您可以使用querySelector 通过ID 获取元素，然后使用angular.element 对其进行操作，例如CodePen .您可以在 main_controller 中使用此技术。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <div id="myDiv">
    <h1>My work in progress</h1>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($element) {
  var myDiv = angular.element($element[0].querySelector("#myDiv"));
  myDiv.addClass("blah");
});

CSS

.blah {
  color: red;
}

Element.querySelector() doc

angular.element doc