2015-01-21 4 views
-2

Директива uitkFooterLink и uitkFooterText не регистрируются. Функция i, передаваемая как второй аргумент функции 'directive', не вызывает вызов. Для целей отладки я поставил некоторые инструкции console.log. они не исполняются.AngularJS: Пользовательская функция директивной ссылки не регистрируется

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">', 
 
     ' \t \t <li ng-repeat="link in links">', 
 
     ' \t \t \t <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 
 
    }; 
 
    });
/************************************************************************************ 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; 
 

 

 

 
}
<!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>

+0

Сообщение код здесь пожалуйста. – tymeJV

+0

У вас есть явное предупреждение о том, что вам нужно включить свой код в вопрос, вместо того, чтобы просто публиковать ссылку на скрипт. Не просто дайте ссылку в вопросе. Вместо этого разместите свой фактический код. – Cerbrus

+0

nope я не получил никакого предупреждения, может быть из-за ссылки, не являющейся строкой sepearte ... отправит здесь код –

ответ

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

Угловые ищут "uitk-футовый" и "uitk-колонтитул-ссылку," так что ваш окончательный HTML должен выглядеть следующим образом:

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

Угловые нормализуют имена директив, поэтому '-' /': '/' _' могут использоваться как разделители взаимозаменяемо. – gkalpak

Смежные вопросы