Question

我是angularjs的新手，我试图使用我的指令从另一个html文件追加html。我只想在我从http请求中从服务器获得成功回调时才这样做。

目前我有我的指令，我不确定这是否是这样做的。我还将我的指令附加到我要附加的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()

        });
    };
});

Answer 1

以下是两个例子：

使用ng-include和指向外部文件的函数

我创建了plunker showing you a working example。只要您点击“处理数据”＆＃39;链接，它将调用NewBox（），它将附加外部文件中的内容。此链接模拟您的回调。

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

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

在链接函数中，我在调用newBox（）后设置了getTemplateUrl（）... 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，一旦按下“处理数据”，就会使用newBox（）函数添加template.html内容。现在，您将用回调替换该链接。

使用ng-show和布尔值隐藏/显示内容

与你使用ng-show的方向略有不同的一种方法是在调用newBox（）之前隐藏模板。

我创建了一个JSFiddle that shows an example of how to do this。

新主机标签在开始时使用ng-show隐藏：

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

链接过程数据是为了模拟你的成功回调，所以当你点击它时，它会调用$ scope.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，然后显示内容。

在您的示例中，您将替换＆＃39;模板＆＃39;通过＆＃39; templateUrl＆＃39;指向你的文件。

这是另一种解决方案。

编辑我的回答以回答后续问题/ newBox不是函数错误

只是阅读你的代码（没有检查使用plunker所以我可能是错的），我猜测问题是，一旦你在成功函数$ scope指向另一个范围。尝试将您的代码更改为此...请注意我将$ scope放入变量＆＃39; vm＆＃39;然后在核心功能和成功回调中使用它。

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()

        });
    };
});'

使用指令

1 个答案: