javascript - AngularJs 多个同名 Controller 在一个文件中隔离作用域

Question

一开始我会说我是 Angular 的初学者，我正在学习它。我计划创建画廊系统，用户可以在其中创建多个画廊。 我正在使用指令 what http.get parital 编译和创建放置图像的表单。对于一种工作良好的形式，但是当我添加更多形式时，我的函数执行多次。我认为我的逻辑对此不利，或者我做了一些坏事。这是我的指令。

directive("contentControl",function($http,$compile){
    return {
        template: 'Click here',
        link: function(scope, element, attrs) {
            element.bind("click", function () {
                $http.get("/js/angular/File/view/admin/FileUpload.html").then(function(resp) {
                    var html = resp.data;
                    var templateGoesHere = angular.element(document.getElementById('templateGoesHere'));
                    templateGoesHere.append(html);

                    $compile(templateGoesHere)(scope);

                });

            });
        },

    }

模板

<div ng-controller="FileController">
    <button ng-click="upload(files)"></button>
    <form name="myForm">
        <div ngf-drop="add($files)" ng-model="files" class="drop-box clearfix"
             ngf-drag-over-class="dragover" ngf-multiple="true">
            <div ng-repeat="image in images">
                <div class="col-sm-3">
                    <img ngf-thumbnail="!image.file.$error && image.file"
                         ngf-size="{width: 5024, height:200, quality: 0.9}"
                         class="img-responsive">
                </div>
            </div>
        </div>
    </form>
</div>

和 Controller

.controller('FileController', function ($scope, Upload) {
        $scope.files = [];
        $scope.images = [];
        $scope.add=function(files)
        {
            console.log(files);
        }
        $scope.upload = function (files) {
            angular.forEach($scope.images,function(file)
            {
        });
            //angular.forEach($scope.images,function(file)
            //{
            //    console.log(file.file);
            //    Upload.upload({
            //        url: '/gallery/create',
            //        fields: {'name': file.file.name}, // additional data to send
            //        file: file.file
            //    });
            //});
        }
    });

我正在寻找单独的数据，或者有人可以向我解释创建多堆画廊的更好逻辑

Answer 1

这是正常的，因为每次您使用该指令时都会创建一个新的 http.get。

1. 使用 tempalteUrl 获取模板。或者，

2. 删除此指令，并使用 ngInclude 和 ngIf 在单击元素时包含您的模板。

   <a href="#" ng-click="showMyTemplate()">Click here</a>
   <div ng-if="showTmp">
      <div ng-include="template.html"/>
   </div>
   

在 Controller 中

// init
$scope.showTmp = false;
$scope.showMytemplate = function(){
    $scope.showTmp = true;
}