AngularJS採用NG-重複

我創建使用ng-repeat菜單，我需要（ng-show）「設置」的外觀上的菜單項的點擊關聯中NG-表演，難度是菜單和「設置「是兩個不同的指令我不能將ng-click與ng-show聯繫起來，這裏是我的例子：Plunker。AngularJS採用NG-重複

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; 
     } 
     } 
    }; 
});

來源

2016-11-25 AndreyH

做出service不要在controlller創建$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(); 
});

來源

2016-11-25 14:29:02

AngularJS採用NG-重複

回答

相關問題