ngShow 在 HTML 上无法使用模板
ngShow not working from a template on HTML
我在 HTML 页面的模板中显示和隐藏 div 时遇到问题。这是一个简单的 JSFiddle 示例 Example.
app.directive('example', function () {
return {
restrict: 'E',
template: '<button ng-click=\"clickMe()\">Click me</button>',
scope: {
exampleAttr: '@'
},
link: function (scope) {
scope.clickMe = function () {
scope.showMe = !scope.showMe;
};
}
};
});
而 HTML 是这样的:
<body ng-app="demo" ng-controller="exampleController">
<div>
<div ng-controller="exampleController as ctrl">
<example example-attr="xxx">
<p ng-show="showMe">Text to show</p>
</example>
</div>
</div>
我无法像 example 那样将我的 html 代码添加到模板中,因为我想要显示或隐藏的 div 是整个 html 页面。
app.directive('example', function () {
return {
restrict: 'E',
template: '<p ng-show=\"showMe\">Text to show</p><button ng-click=\"clickMe()\">Click me</button>',
scope: {
exampleAttr: '@'
},
link: function (scope) {
scope.clickMe = function () {
scope.showMe = !scope.showMe;
};
}
};
});
提前致谢
你可以这样做 - Fiddle
JS
var app = angular.module("demo", [])
app.controller('exampleController', function ($scope) {
$scope.showMe = false;
});
app.directive('example', function () {
return {
restrict: 'E',
template: '<button ng-click="clickMe()">Click me</button><br>',
scope: {
exampleAttr: '@',
showMe: "="
},
link: function (scope) {
scope.clickMe = function() {
scope.showMe = !scope.showMe;
};
}
};
});
标记
<body ng-app="demo" ng-controller="exampleController">
<div>
<div ng-controller="exampleController as ctrl">
<example example-attr="xxx" show-me="showMe"></example>
<p ng-show="showMe">Text to show</p>
</div>
</div>
</body>
如果你想在你的 <example> <!-- this stuff here --> </example>
中包含一些东西,你需要使用 transclusion
,在编译和创建指令后显示。
在您的指令中搭乘 scope: {}
对象。
app.directive('example', function () {
return {
restrict: 'E',
template: '<div ng-transclude></div><button ng-click="clickMe()">Click me</button>',
// ^ notice the ng-transclude here, you can place this wherever
//you want that HTML to show up
// scope : {}, <-- remove this
transclude: true, // <--- transclusion
// transclude is a "fancy" word for, put those things that are
// located inside the directive html inside of the template
//at a given location
link: function (scope) {
/* this remains the same */
}
};
});
这将使它按预期工作!
Side note: You don't need to escape \"
your double quotes since
you have your template inside of a single quote ' <html here> '
string.
我在 HTML 页面的模板中显示和隐藏 div 时遇到问题。这是一个简单的 JSFiddle 示例 Example.
app.directive('example', function () {
return {
restrict: 'E',
template: '<button ng-click=\"clickMe()\">Click me</button>',
scope: {
exampleAttr: '@'
},
link: function (scope) {
scope.clickMe = function () {
scope.showMe = !scope.showMe;
};
}
};
});
而 HTML 是这样的:
<body ng-app="demo" ng-controller="exampleController">
<div>
<div ng-controller="exampleController as ctrl">
<example example-attr="xxx">
<p ng-show="showMe">Text to show</p>
</example>
</div>
</div>
我无法像 example 那样将我的 html 代码添加到模板中,因为我想要显示或隐藏的 div 是整个 html 页面。
app.directive('example', function () {
return {
restrict: 'E',
template: '<p ng-show=\"showMe\">Text to show</p><button ng-click=\"clickMe()\">Click me</button>',
scope: {
exampleAttr: '@'
},
link: function (scope) {
scope.clickMe = function () {
scope.showMe = !scope.showMe;
};
}
};
});
提前致谢
你可以这样做 - Fiddle
JS
var app = angular.module("demo", [])
app.controller('exampleController', function ($scope) {
$scope.showMe = false;
});
app.directive('example', function () {
return {
restrict: 'E',
template: '<button ng-click="clickMe()">Click me</button><br>',
scope: {
exampleAttr: '@',
showMe: "="
},
link: function (scope) {
scope.clickMe = function() {
scope.showMe = !scope.showMe;
};
}
};
});
标记
<body ng-app="demo" ng-controller="exampleController">
<div>
<div ng-controller="exampleController as ctrl">
<example example-attr="xxx" show-me="showMe"></example>
<p ng-show="showMe">Text to show</p>
</div>
</div>
</body>
如果你想在你的 <example> <!-- this stuff here --> </example>
中包含一些东西,你需要使用 transclusion
,在编译和创建指令后显示。
在您的指令中搭乘 scope: {}
对象。
app.directive('example', function () {
return {
restrict: 'E',
template: '<div ng-transclude></div><button ng-click="clickMe()">Click me</button>',
// ^ notice the ng-transclude here, you can place this wherever
//you want that HTML to show up
// scope : {}, <-- remove this
transclude: true, // <--- transclusion
// transclude is a "fancy" word for, put those things that are
// located inside the directive html inside of the template
//at a given location
link: function (scope) {
/* this remains the same */
}
};
});
这将使它按预期工作!
Side note: You don't need to escape
\"
your double quotes since you have your template inside of asingle quote ' <html here> '
string.