[英]AngularJS, Angular-Material - HTML Not rendering despite object present on $scope
[英]angular-material - $mdSticky duplicates object
我开始使用Angular Material,并且我想制作一个粘性的工具栏,所以我去了文档并阅读了有关$ mdSticky的内容。 所以我写了指令,但是工具栏在克隆时会重复。 可以固定/删除吗?
index.html
<body ng-cloak>
<md-content layout-fill>
<div layout="column">
<md-toolbar class="md-medium-tall md-accent" layout-align="center" md-toolbar-shrink nio-sticky>
<div class="md-toolbar-tools" layout="row">
<span flex>
<button class="md-button md-icon-button" hide-gt-sm md-ink-ripple>
<md-icon md-svg-icon="assets/icons/menu-button.svg">
</md-icon>
</button>
</span>
<div flex layout="row" layout-align="end" layout-align-gt-sm="center">
<img src="assets/img/naumovski-logo.svg" layout-align="center" />
</div>
<span flex show-gt-sm hide-xs hide-sm>
</span>
</div>
</md-toolbar>
<md-nav-bar hide-xs hide-sm md-selected-nav-item="'home'" nav-bar-aria-label="navigation links">
<div flex layout="row" layout-align="center">
<md-nav-item md-nav-click="goto('home')" name="home">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
<md-nav-item md-nav-click="goto('page4')" name="page4">Page Four</md-nav-item>
</div>
</md-nav-bar>
</div>
<md-content>
//content here
<br />
</md-content>
</md-content>
sticky.js
(function () {
'use strict';
angular
.module('naumovskiIo')
.directive('nioSticky', sticky);
sticky.$inject = ['$mdSticky', '$compile'];
function sticky($mdSticky, $compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, element) {
$mdSticky(scope, element);
}
}
}
})();
我也尝试为工具栏创建一个单独的模板,即不是一个通用指令,然后对其进行编译,但是这仍然是一个失败。 有什么帮助吗?
您是否尝试根据文档使用$ mdSticky服务?
因此,您应该将指令用作元素而不是属性:
<nio-sticky></nio-sticky>
并且在指令的定义中,您将按照以下方式定义模板(根据您的示例,这就是它的外观):
<md-toolbar class="md-medium-tall md-accent" layout-align="center" md-toolbar-shrink>
<div class="md-toolbar-tools" layout="row">
<span flex>
<button class="md-button md-icon-button" hide-gt-sm md-ink-ripple>
<md-icon md-svg-icon="assets/icons/menu-button.svg">
</md-icon>
</button>
</span>
<div flex layout="row" layout-align="end" layout-align-gt-sm="center">
<img src="assets/img/naumovski-logo.svg" layout-align="center" />
</div>
<span flex show-gt-sm hide-xs hide-sm>
</span>
</div>
</md-toolbar>
更新:
当然,可以将该模板放入.html文件,即sticky-toolbar.directive.html ,然后可以将其引用到指令的定义中,如下所示:
(function () {
'use strict';
angular
.module('naumovskiIo')
.directive('nioSticky', sticky);
sticky.$inject = ['$mdSticky', '$compile', '$templateRequest'];
function sticky($mdSticky, $compile, $templateRequest) {
return {
restrict: 'E',
replace: true,
link: function(scope, element) {
$templateRequest('sticky-toolbar.directive.html').then(function(html){
var template = angular.element(html);
element.append($compile(template)(scope));
$mdSticky(scope, element, $compile(template)(scope));
});
}
}
}
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.