Angular中的directive指令是否能接受object类型的赋值?

发布于 2022-09-01 12:00:27 字数 576 浏览 38 评论 0

我想写一个list
利用directive来写一个item
这个item要根据赋予的不同的值产生相应变化 但目前我只知道简单的数据赋值
例如

.directive('al-item', function() {
    return {
        restrict: 'EA',
        template: '

<div>'
                 +'</div>

',
        replace: true,
        controller: function($scope, $element, $attrs, $transclude) {
            //这里根据a、b、c 三者的值 进一步修饰al-item
        }
    };
})

<al-item a='' b='' c=''>

我希望的形式 更像是

<al-item object=''>

这样提供一个object数据
al-item就能实现我预定的样子
请问这可以实现吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

临走之时 2022-09-08 12:00:27

你可以看下关于指令的 scope部分,可以解决你的疑问。

大概:

html<div ng-controller="cc">
<al-item object="obj"></al-item>
</div>
jsangular.module('xx', [])
.controller('cc', ['$scope', function($scope) {
    $scope.obj = {a:'a', b:'b', 'c':'c'}
}])
.directive('alItem', function() {
    return {
        restrict: 'EA',
        template: '<div>'+'</div>',
        replace: true,
        transclude: true,
        scope: {
            object: "="
        },
        controller: function($scope, $element, $attrs, $transclude) {
            //scope.object 这里就可以判断了
        }
    };
})

大概这样吧 详细的可以看官方文档了

故事和酒 2022-09-08 12:00:27

directive 的 scope 本身就支持三种模式
1. "=" 任何对象
2. "&" 外部的方法传入 directive 内部调用
3. "@" 字符串

尸血腥色 2022-09-08 12:00:27

html里面的object也是一个attrs, 在function 里已经调入attrs,可以用attrs直接调用object。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文