Question

我创建了一个页面，您可以在面板中查看用户的大量详细信息。

每个面板都包含从服务中收到的一些信息，有时还会对其进行操作。

我有大约10个面板，观众决定他想要看什么。

将每个面板作为单独的控制器是否正确，或者只有具有操作的面板需要位于单独的控制器中，或者是一个控制器中的所有面板？

如果每个面板都是控制器，我的代码就是：

div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body" ng-controller="historyPanel" ng-include="'panels/history.html'"></div>
</div>

有没有办法让我知道面板是否为空？

例如，我有一个历史小组，我只想在有历史展示的情况下展示，而我不想展示＆＃34;没有历史＆＃34;，只是想隐藏那个小组。 / p>

但我确实希望将面板代码保留在history.html视图之外。

Answer 1

您应该考虑为此创建一个指令。您可以创建包含所有10个面板的单个指令，并提供一个属性来指定要显示的面板，或者您可以创建10个不同的指令。

类似的东西：

<my-panel panel="history" ng-show="userPanel.history.display"></my-panel>
<my-panel panel="settings" ng-show="userPanel.settings.display"></my-panel>
<my-panel panel="friends" ng-show="userPanel.friends.display"></my-panel>
<my-panel panel="music" ng-show="userPanel.music.display"></my-panel>

然后您的示波器控制器可能具有以下内容：

app.controller('MyController', function($scope) {
    $scope.userPanel = {
        history: { display: true },
        settings: { display: true },
        friends: { display: true },
        music: { display: false }
    }
});

这样，您可以从具有显示面板的用户首选项的服务加载数据。

Answer 2

尝试这样的事情，尽量不要不惜一切代价注入$ scope。：）

<div class="container" style="left: 50px;"></div>

这就是那个模板：

function PanelCtrl() {
  'use strict';

  var ctrl = this;

  ctrl.panels = [{
    "id": 0,
    "name": "Lucia Oconnor",
    "history": "my history"
  }, {
    "id": 1,
    "name": "Stevenson Mcintosh",
    "history": "my history"
  }, {
    "id": 2,
    "name": "Spears Sims",
    "history": "my history"
  }];

}

function panel() {
  'use strict';

  return {
    restrict: 'E',
    scope: {},
    bindToController: {
      //Depends what youd like to do with the PanelCtrl
      //'&': use a function on that ctrl
      //'=': two way data binding
    },
    controller: 'PanelCtrl as ctrl',
    templateUrl: './templates/panel.ng.html'
  };
}

angular
  .module('app', [])
  .controller('PanelCtrl', PanelCtrl)
  .directive('panel', panel);

这将是你的HTML：

   //also if static content might want to use--one time bindings.
   // that would be ::panel.name
  <div class="panel panel-default" id="panel_{{panel.id}}">
    <div class="panel-heading">{{Panel.name}}</div>
    <div class="panel-body">{{Panel.history}}</div>
  </div>

AngularJS - 正确的方法是什么？

2 个答案: