Question

我在前端开发方面很陌生。它的角质材料。我试图从父级访问其他hmtl中的div元素。我想做什么。

div.html

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

main.html中

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

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

main_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) {

  }
})();

主要-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

使用div id参数作为html标记

1 个答案: