使用指令将另一个文件中的HTML附加到div

我对angularjs相当陌生，我尝试使用我的指令从另一个html文件追加html。我只想要这样做，只有当我通过http请求从服务器获得成功回调时。使用指令将另一个文件中的HTML附加到div

目前我有我的指示，我不知道这是否是这样做的方式。我也附加了我的指令到我想追加的div。

host.directive('newHost', function(){ 
    return { 
     restrict: 'E', 
     link: function(scope, element, attr){ 
      scope.newBox = function(){ 
       templateUrl: 'newHostTemplate.html'; 
      }; 
     } 
    } 
});

我然后调用$scope.newBox()上在这一点上我要追加到div我的成功回调。

我跟着下面的答案，并试图适应它到我的情况，但是我得到的错误$scope.newBox is not a function，这是我目前的实施。

host.directive('newHost', function(){ 
    return { 
     restrict: 'E', 
     template: '<div ng-include="getTemplateUrl()"></div>', 
     link: function(scope, element, attr){ 
      scope.newBox = function(){ 
       console.log('newBox'); 
       scope.getTemplateUrl = function(){ 
        return 'newHostTemplate.html' 
       }; 
      }; 
     } 
    } 
}); 

//controller, this does all the routing on client side 
host.controller('hostsController', function($scope, $http, $window, $rootScope){ 
    $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { 
     console.log("failed to change routes"); 
    }); 

    $scope.newHost = {}; 
    $scope.addNewHost = function() { 
     $http({ 
      method : 'POST', 
      url  : 'http://192.168.0.99:5000/newHost', 
      data : JSON.stringify($scope.newHost), // pass in data as strings 
     }) 
     .success(function(data) { 
      console.log(data); 
      $scope.newBox() 
      //on success we want to close the modal and reset the data 
      $scope.newHost = {} 
      $scope.dismiss() 

     }); 
    }; 
});

来源

2016-05-31 DorkMonstuh

使用'templateUrl'属性设置路径模板 – charlietfl

templateUrl必须是同一级别的链接，你有内部函数里面的语法无效。动态模板可以用ng-include完成我认为 – YOU

这里有两个例子：

使用NG-包括和指向外部文件

我创建了一个plunker showing you a working example的功能。只要你点击'流程数据'链接，它就会调用NewBox（）来添加外部文件中的内容。这个链接模拟你的回调。

在该指令中，模板被定义为模板：

<div ng-include="getTemplateUrl()"></div>

和链接功能，我安装getTemplateUrl（）一次newBox（）被调用的... getTemplateUrl（）函数返回的名称外部文件（例如template.html）的：

link: function(scope, element, attr) { 
    scope.newBox = function() { 
     console.log('new Box'); 
     scope.getTemplateUrl = function() { 
      return 'template.html'; 
     } 
    } 
}

完整JS文件是：

angular.module('components', []) 
    .directive('newHost', function() { 
    return { 
     restrict: 'E', 
     template: '<div ng-include="getTemplateUrl()"></div>', 
     link: function(scope, element, attr) { 
     scope.newBox = function() { 
      console.log('new Box'); 
      scope.getTemplateUrl = function() { 
       return 'template.html'; 
      } 
     } 
     } 

    } 
    }); 

    angular.module('HelloApp', ['components']) 
.controller('MyCtrl', ['$scope', function($scope) { 
    $scope.name = 'This is the controller'; 

    $scope.go = function() { 
     console.log('Processing...'); 
     $scope.newBox(); 
    } 
}]);

index.html的是：

<!doctype html> 
<html ng-app="HelloApp" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCtrl"> 
    <new-host></new-host> 
    <br/> 
    <a ng-href='#here' ng-click='go()'>process data</a> 

    </div> 
</body> 
</html>

而且template.html是一个简单的例子：

<div> 
    This is some content from template.html 
</div>

如果您在plunker看，一旦你按下 '过程数据' 中，template.html含量则使用newBox（）函数添加。现在，你会用你的回调替换那个链接。

使用NG秀和一个布尔隐藏/显示内容这是在一个稍微不同的方向前进

一种方式比你是用NG-显示和隐藏模板，直到newBox（）是调用。我建立了JSFiddle that shows an example of how to do this。

新主机的代码使用NG-显示在开始隐藏：

<div ng-controller="MyCtrl"> 
    <new-host ng-show='displayNewHost'></new-host> 
    <br/> 
    <a ng-href='#here' ng-click='go()' >process data</a> 
</div>

链接过程数据来模拟你的成功回调，所以当你点击它，它会调用$范围。newBox（）

这里是主要的JS文件：

angular.module('components',[]) 
.directive('newHost', function() { 
    return { 
     restrict: 'E', 

     link: function(scope, element, attr) { 
      scope.newBox = function() { 
       console.log('new Box'); 
       scope.displayNewHost = true; 
      }; 
     } 

    } 
}) 

angular.module('HelloApp', ['components']) 

function MyCtrl($scope) { 
    $scope.displayNewHost = false; 
    $scope.name = 'This is the controller'; 

    $scope.go = function() { 
     console.log('Processing...'); 
     $scope.newBox(); 
    } 
} 

angular.module('myApp', ['components'])

正如你看到的，在控制器中，我们设置displayNewHost为false隐藏指令。一旦点击过程数据链接，newBox函数将displayNewHost设置为true，然后显示内容。

在你的例子中，你将'templateUrl'替换为'template'指向你的文件。

这是另一种解决方案。

编辑我的答案来回答后续的问题/ newBox不是一个函数错误

只是读你的代码（不使用plunker所以我可能是错的检查），我猜测，这个问题是一旦你在成功函数$ scope中指向另一个范围。试着将你的代码改成这个......请注意，我把$ scope放在一个变量'vm'中，然后在核心函数和成功回调函数中使用它。

host.controller('hostsController', function($scope, $http, $window, $rootScope){ 
    $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { 
     console.log("failed to change routes"); 
    }); 
    var vm = $scope; 
    vm.newHost = {}; 
    vm.addNewHost = function() { 
     $http({ 
      method : 'POST', 
      url  : 'http://192.168.0.99:5000/newHost', 
      data : JSON.stringify(vm.newHost), // pass in data as strings 
     }) 
     .success(function(data) { 
      console.log(data); 
      vm.newBox() 
      //on success we want to close the modal and reset the data 
      vm.newHost = {} 
      vm.dismiss() 

     }); 
    }; 
});'

来源

2016-06-01 01:51:53 Gregori

嗨，感谢您的输入，我遇到问题，因为我得到的newBox不是函数。我已经更新了上面的代码，并试图调整您的解决方案以适应我的情况。我想知道你是否可以指出我做错了什么？ – DorkMonstuh

@DorkMonstuh - 我更新了我的答案，参见上面的部分，称为编辑我的答案以回答后续问题/ newBox不是函数错误（在帖子结尾处）。没有检查plunker，错误可能是$ scope在您的回调中指向一个不同的范围。我使用一个变量来确保我在函数和回调中引用了相同的作用域。让我知道。 – Gregori

我更新了[plunker示例]（https://plnkr.co/edit/hN8BuECSCcuVCkNH7mrW?p=preview）。由于URL不正确，它会转到错误回调并成功调用vm.newBox（）;当然，在你的机器上它会通过成功回调并调用vm.newBox（） – Gregori

使用指令将另一个文件中的HTML附加到div

回答

相关问题