Question

指令uitkFooterLink和uitkFooterText未注册。函数我作为第二个参数传递给＆＃39;指令＆＃39;函数没有被调用。出于调试目的，我确实放了一些console.log语句。他们没有被处决。

＆＃13;

angular.module('uitk.component.uitkFooter', ['ngSanitize'])
  .directive('uitkFooter', function() {

    function controller($scope) {
      $scope.links = [];
      $scope.htmlText = null;
      this.addLink = function(link) {
        $scope.links.push(link);
        console.log(link);
      };
      this.addText = function(htmlText) {
        $scope.htmlText = htmlText;
        console.log(htmlText);
      };
      console.log("footer ctrl");
    }

    console.log("running through definition of footer ....");

    return {
      restrict: 'E',
      replace: true,
      scope: {
        logo: "@",
        url: "@"
      },
      template: [
        '<footer>',
        '   <ul class="tk-foot-links">',
        '		<li ng-repeat="link in links">',
        '			<a href="{{link.url}}" target="_blank">{{link.label}}</a>',
        '      </li>',
        '   </ul>',
        '   <p ng-bind-html="htmlText"></p>',
        '</footer>'
      ].join(''),
      controller: controller
    };
  })
  .directive('uitkFooterLink', function() {

    function link($scope, $element, $attrs, uitkFooterCtrl) {
      console.log("footerlink link");
      uitkFooterCtrl.addLink($scope);
    }
    console.log("running through definition of footer link ....");

    return {
      restrict: 'E',
      replace: true,
      require: '^uitkFooter',
      scope: {
        url: '@',
        label: '@'
      },
      link: link
    };
  })
  .directive('uitkFooterText', function() {

    function link($scope, $element, $attrs, uitkFooterCtrl) {
      console.log("footerText link");
      uitkFooterCtrl.addText($element.html());
    }

    console.log("running through definition of footer text ....");

    return {
      restrict: 'E',
      replace: true,
      require: '^uitkFooter',
      scope: false,
      link: link
    };
  });

＆＃13;

/************************************************************************************ Footer */



html,



body {



  height: 100%;



}



.tk-wrapper {



  box-sizing: border-box;



  min-height: 100%;



  margin: 0 auto -101px;



  /* bottom margin = negative value of (the footer height + footer top margin) */



}



.tk-foot-push {



  height: 101px;



  /* height = footer height plus footer top margin */



  margin: 0px;



  clear: both;



}



footer {



  height: 75px;



  margin: 26px 26px 0 26px;



}



#tk-foot-links {



  display: inline-block;



}



#tk-foot-links li {



  display: inline-block;



}



#tk-foot-links li:before {



  color: #b3b3b3;



  content: '|';



  display: inline-block;



  margin: 0 8px;



}



#tk-foot-links li:first-child:before {



  content: '';



  display: none;



  width: 0;



}



footer > p {



  margin: 0;



}



#tk-foot-addendum {



  font-size: 10px;



  margin-top: 13px;



}

＆＃13;

<!DOCTYPE html>
<html ng-app="footerDemo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.js"></script>
</head>

<body>

  <h1>Footer Demo</h1>
  <uitk:footer>
    <uitk:footer-link label="Link 1" url="#link1"></uitk:footer-link>
    <uitk:footer-link label="Link 2" url="#link2"></uitk:footer-link>
    <uitk:footer-text>
      &copy; 2014 My company, Inc. All rights reserved.
    </uitk:footer-text>
  </uitk:footer>


  <script>
    angular.module('footerDemo', ['uitk.component.uitkFooter'])
      .config(function($logProvider) {
        $logProvider.debugEnabled(true);
      });
  </script>
</body>

</html>

＆＃13;

Answer 1

<uitk:footer>
  <uitk:footer-link label="Link 1" url="#link1" />
</uitk:footer>

Angular正在寻找“uitk-footer”和“uitk-footer-link”，所以你的最终html应该是这样的：

<uitk-footer>
  <uitk-footer-link label="Link 1" url="#link1" />
  <uitk-footer-link label="Link 2" url="#link2" />
</uitk-footer>

AngularJS：自定义指令链接功能未注册

1 个答案: