个人中心
gpt4 book ai didi

javascript - AngularJs:使用某些值从 Controller 调用指令

转载 作者：行者123 更新时间：2023-12-03 03:18:47 25 4
gpt4 key购买 nike

我有一个这样的指令

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>

但是我想在 Controller 发出 http 调用后渲染它

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

最佳答案

AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. 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>

关于javascript - AngularJs:使用某些值从 Controller 调用指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46663778/

25 4 0
文章推荐： javascript - 将值传递到 p5 的 Canvas 中，实例化
文章推荐： javascript - css 动画无法与 javascript 代码一起使用
文章推荐： javascript - Google map 嵌入 Api - 参数 q 无效
文章推荐： javascript - 如何更改 mxCell 的父级
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com