Question

我如何创建＆＃34; div＆＃34;在另一个＆＃34; div＆＃34;内的元素，以及同一级别的其他元素动态！

[此图显示了我要完成的工作] http://i.stack.imgur.com/AQyK7.jpg

问题在于我想添加＆＃34; GrianContenu＆＃34;控制台告诉我，函数GrainContenu（）是未定义的，但它可以与＆＃34; Division＆＃34 ;.

一起使用。

有人可以帮助我完全添加我的元素，如图所示。

以下是我的app.html，app.js和rightClickDirective.app

app.js

angular.module("Webapp", ["ngSanitize","directive.contextMenu"])



    .controller("DivisionCtrl", function($scope) {
        $scope.divisions = [{id: 'division1'}];

      $scope.addNewDivision = function() {
        $scope.divisions.push({id: 'division' + ($scope.divisions.length+1)});
      };

    })

    .controller('GrainContenuCtrl', function($scope) {

        $scope.grainContenus = [{'id': 'grainContenu1'}];
        $scope.addNewGrainContenu = function() {
             $scope.grainContenus.push({'id': 'grainContenu' + ($scope.grainContenus.length+1)});  
        };
    })

    .controller('RightClickCtrl', function($scope) {
      $scope.clicked = '';
      $scope.GrainContenu = function() {
        $scope.clicked = $scope.addNewGrainContenu();

      };

      $scope.Division = function() {
        $scope.clicked = $scope.addNewDivision();

      };

      $scope.QCU = function() {
        $scope.clicked = 'link was clicked';

      };

      $scope.QCM = function() {
        $scope.clicked = 'delete was clicked';

      };
    });

rightClickDirective.js

(function(angular) {
  var ngContextMenu = angular.module('directive.contextMenu', []);

  ngContextMenu.directive('cellHighlight', function() {
    return {
      restrict: 'C',
      link: function postLink(scope, iElement, iAttrs) {
        iElement.find('td')
          .mouseover(function() {
            $(this).parent('tr').css('opacity', '0.7');
          }).mouseout(function() {
            $(this).parent('tr').css('opacity', '1.0');
          });
      }
    };
  });

  ngContextMenu.directive('context', [

    function() {
      return {
        restrict: 'A',
        scope: '@&',
        compile: function compile(tElement, tAttrs, transclude) {
          return {
            post: function postLink(scope, iElement, iAttrs, controller) {
              var ul = $('#' + iAttrs.context),
                last = null;

              ul.css({
                'display': 'none'
              });
              $(iElement).bind('contextmenu', function(event) {
                event.preventDefault();
                 ul.css({
                  position: "fixed",
                  display: "block",
                  left: event.clientX + 'px',
                  top: event.clientY + 'px'
                });
                last = event.timeStamp;
              });
              //$(iElement).click(function(event) {
              //  ul.css({
              //    position: "fixed",
              //    display: "block",
              //    left: event.clientX + 'px',
              //    top: event.clientY + 'px'
              //  });
              //  last = event.timeStamp;
              //});

              $(document).click(function(event) {
                var target = $(event.target);
                if (!target.is(".popover") && !target.parents().is(".popover")) {
                  if (last === event.timeStamp)
                    return;
                  ul.css({
                    'display': 'none'
                  });
                }
              });
            }
          };
        }
      };
    }
  ]);
})(window.angular);

app.html

<html>
<head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
</head>
<body ng-app="Webapp" ng-controller="DivisionCtrl">

    <h1>Module Opale</h1>
    Titre<input type="text" placeholder="Titre"><br />
    Metadonnées<input type="text" placeholder="Titre"><br />
    Objectif du module<input type="text" placeholder="Objectif">

        <div ng-controller="RightClickCtrl" context="context1">
        <div class="form-group" data-ng-repeat="division in divisions" ng-controller="GrainContenuCtrl">
            <h2>Division</h2>
            Titre<input type="text" placeholder="Titre">
            <br />Titre court
            <input type="text" placeholder="Titre"><br />
                <div class="form-group" data-ng-repeat="grainContenu in grainContenus">

                    <h3>Grain de Contenu</h3>
                    Titre<input type="text" placeholder="Titre"><br />
                    Titre court<input type="text" placeholder="Titre"><br />
                    <h4>Information</h4>
                    Titre<input type="text" placeholder="Titre"><br />
                    <textarea rows="4" cols="50"></textarea><br />
                </div>
            <hr />
            </div>

            <ul id="context1" class="dropdown-menu">
              <li><a ng-click="GrainContenu()">Grain de Contenu</a></li>
              <li><a ng-click="Division()">Division</a></li>
              <li><a ng-click="QCU()">Exercice:QCU</a></li>
              <li><a ng-click="QCM()">Exercice:QCM</a></li>
            </ul>
        </div>
    <script type="text/javascript"    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/rightClickDirective.js"></script>
    <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>   
</body>
</html>

Answer 1

我创建了一个重新创建上述代码段的plunker。看起来问题是你当前的控制器层次结构是

-DivisionController
  |-RightClickCtrl (has no idea about GrainContenu)
  |  |--GrainContenuCtrl (GrainContenu)
  |- etc...

函数GrainContenu在GrainContenuCtrl中定义。＆＃39; RightClickCtrl＆＃39;不知道它存在（不完全正确，因为你可以遍历$scope层次结构来找到 - 在我看来这并不理想）

Plunker只是简单地移动＆＃39; GrainContenuCtrl＆＃39;在＆＃39; RightClickCtrl＆＃39;之上因此RightClickCtrl没有原型继承自GrainContenuCtrl，从而允许它访问GrainContenu函数。

-DivisionController
  |--GrainContenuCtrl (GrainContenu)
  |   |-RightClickCtrl (prototypically inherits from GrainContenuCtrl ) 
  |- etc...

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?的答案，了解有关AngularJS中原型继承的更多信息

如何使用不同的Controller（AngularJs）创建嵌套的部门？

1 个答案: