使用指令將另一個文件中的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

回答

相關問題