使用 div id 参数作为 html 标签答案

【问题标题】：Using div id parameter as html tag使用 div id 参数作为 html 标签
【发布时间】：2016-11-18 17:37:03
【问题描述】：

我是前端开发的新手。它是角材料。我正在尝试从父级访问其他 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) {

  }
})();

main-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 我该如何实施？谢谢。

【问题讨论】：

尝试如何？发布角码；你认为 myDiv 标签是如何链接到 div 的？
你能指定你使用的是哪个版本的angularjs吗？
如果您对视图使用不同的控制器，那么请使用一些数据共享方法，例如 rooscope、broadcosting
请您详细说明您的问题？
我已经添加了控制器的代码，实际上是角材料。

标签： html angularjs angular-material

【解决方案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>

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

【讨论】：