Question

我使用ng-repeat创建了一个菜单，我需要关联（ng-show）＆＃34;设置＆＃34;的外观。点击菜单项，难点是菜单和＆＃34;设置＆＃34;是两个不同的指令我无法将ng-click与ng-show相关联，此处为我的示例：Plunker。

Plunker无法正常工作，我不知道为什么

HTML：

<body ng-app="myApp" ng-controller="getParams">

  <menu model = 'mConf' params = 'arr' show =' modalShown'></menu>
  <setup model = 'sConf' params = 'arr' show = 'modalShown' width = '95%' height = '95%'></setup>

</body>

AngularJS：

var app = angular.module('myApp', []);

app.controller('getParams', function($scope, $http, $timeout) {
    $scope.getData = function() {
        $http.get("../send")
            .then(function(response) {
                    $scope.text = response.data;
                    $scope.arr = $scope.text.split(' ');
                    $scope.timeFunc();
                },
                function(response) {
                    $scope.timeFunc();
                });
    };
    $scope.getMenuConfig = function() {
        $http.get("config/menuConfig.json")
            .then(function(response) {
                $scope.mConf = response.data;
            });
    };
    $scope.getSetupConfig = function() {
        $http.get("config/setupConfig.json")
            .then(function(response) {
                $scope.sConf = response.data;
            });
    };
    $scope.timeFunc = function() {
        $timeout(function() {
            $scope.getData();
        }, 1000);
    };
    $scope.getMenuConfig();
    $scope.getSetupConfig();
    $scope.getData();

});



app.directive('menu', function(){
  return{
    restrict: 'AE',
    scope: {
      model: '=',
      params: '=',
      show: '@',
    },
    replace: true,
    transclude: true,
    link: function (scope) {
      scope.toggleModal = function() {
        scope.show = true;
      };
    },
    template: '<div class="exp">'+
        '<div ng-repeat="test in model">'+
            '<div class="title" ng-click="toggleModal()">'+
                '<table style="width:95%">'+
                    '<tr>'+
                        '<td class="logo" rowspan="2">'+
                            '<img ng-src="{{test.content.logo}}"  />'+
                        '</td>'+
                        '<td class="name" colspan="3">{{test.content.name}}</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td class="par" ng-repeat="testus in test.content.adr">'+
                          '<img class="ico" ng-src="{{testus.ico}}"/>'+
                          '{{params[testus.val] | conv: testus.filter}}'+
                        '</td>'+
                    '</tr>'+
                '</table>'+
            '</div>'+
        '</div>'+
    '</div>'
  };
});

app.directive('setup', function() {
  return {
    restrict: 'E',
    scope: {
      show: '@',
      model: '='
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
      template:  '<div>'+
                    '<div class="ng-modal" ng-show="show" ng-repeat = "test in model">' +
                        '<div class="ng-modal-overlay" ng-click="hideModal()"></div>' +
                          '<div class="ng-modal-dialog" ng-style="dialogStyle">'+
                            '<div class="ng-modal-check" ng-click="">✔</div>'+
                            '<div class="ng-modal-close" ng-click="hideModal()">X</div>'+
                            '<div class="ng-modal-dialog-content" ng-transclude>'+
                            '<div class="testsetup" ng-repeat = "testus in test.setup">'+
                            '<p>{{testus.address}}+++{{testus.template}} {{$parent.$index}}</p>'+
                          '</div>'+
                        '</div>'+
                      '</div>'+
                  '</div>'+
                '</div>'
  };
});

app.filter('conv', function() {
    return function(number, symbol) {
      if (isNaN(number)) {
        return ""
      } else{
        var symbol = symbol || '';
        if (number > 32768) {
            if (number == 32769) {
                return "----";
            } else {
                return (number - 65536) / 10 + symbol;
            }
        } else {
            return number / 10 + " " + symbol;
        }
      }
    };
});

Answer 1

在控制器上创建service不要创建$http请求，我认为它更清洁，更标准

$scope.getMenuConfig = function() {
    $http.get("config/menuConfig.json")
        .then(function(response) {
            $scope.mConf = response.data;
        });
};




app.service('MenuConfigService', function($http) {
    function getConfig() {
      $http.get("config/menuConfig.json")
        .then(function(response) {
            $scope.mConf = response.data;
        });
   }
});

然后将其用作

app.controller('myCtrl', function($scope, MenuConfigService) {
   MenuConfigService.getConfig();
});

AngularJS在ng-repeat中使用ng-show

1 个答案: