Question

我有这样的指令

app.directive('pagination',function () {
    //custom directive for build pagination
    return {
        restrict: 'E',
        template:function (elem,attr) {
            console.log(attr.pageCount);
            return 'pagination here';
        }
    };
})

并在我的html中渲染它像

<pagination pageCount="2" currentPage="currentPage"></pagination>

但我希望在来自我的控制器的http调用之后呈现此内容

$http.post('/search',searchParams).then(function (response) {
    //render `pagination` from here 
  })

Answer 1

AngularJS规范化元素的标记和属性名称以确定哪些元素匹配哪些指令。我们通常会提到它们区分大小写的camelCase规范化名称的指令（例如 ngModel）。但是，由于HTML不区分大小写，我们参考 DOM中的指令通过小写形式，通常使用 DOM元素上的破折号分隔属性（例如ng-model）。

尝试使用ng-if ..

 <pagination page-count="2" current-page="currentPage" ng-if="showPage"></pagination>

   $http.post('/search',searchParams).then(function (response) {
    //render `pagination` from here 
    $scope.showPage = true;
  })

(function(angular) {
  'use strict';
angular.module('docsTransclusionExample', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.name = 'Tobias';
  }])
  .directive('pagination',function () {
    //custom directive for build pagination
    return {
        restrict: 'E',
        template:function (elem, attr) {
            console.log(attr.pageCount);
           // console.log(attr.pagecount);
            return 'pagination here';
        }
    };
});
})(window.angular);

/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-transclusion-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="docsTransclusionExample">
  <div ng-controller="Controller" ng-init="hid = false">{{hid}}
 <pagination ng-if="hid" page-count="2" current-page="currentPage"></pagination>
  <button ng-click="hid=true">Click!</button>
</div>
</body>
</html>

AngularJs：来自控制器的Call指令，带有一些值

1 个答案: