首页新闻找找看学习计划

angular directive几个问题。求解释

0
悬赏园豆:10 [已解决问题] 解决于 2016-10-19 09:03

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .expandertsp {
            border: 1px solid black;
            width: 250px;
        }
         .expandertsp > .title {
                background-color: black;
                color: white;
                padding: .1em .3em;
                cursor: pointer;
         }
         .expandertsp > .body {
                padding: .1em .3em;
         }
    </style>
</head>
<body ng-app='expanderModule'>
    <div ng-controller='SomeController'>
        <expander class='expandertsp' expander-title='title'>
           
        </expander>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var expanderModule = angular.module('expanderModule', []);
        expanderModule.directive('expander', function () {
            return {
                restrict: 'EA',
                replace: true,
                transclude: true,
                scope: {
                    title: '=expanderTitle'
                },
                template: '<div>'
                         + '<div class="title" ng-click="toggle()">{{title}}</div>'
                         + '<div class="body" ng-show="showMe" >{{text}}</div>'
                         + '</div>',
                link: function (scope, element, attrs) {
                    scope.showMe = false;
                    scope.toggle = function toggle() {
                        scope.showMe = !scope.showMe;
                    }
                }
            }
        });
        expanderModule.controller('SomeController', function ($scope) {
            $scope.title = '点击展开';
            $scope.text = ' class为"bodydiv 绑定的text为什么不显示呢?';
        });
    </script>
</body>
</html>

第一个问题:自定义指令directive 模板template 里面的{{text}}为什么运行没显示。而

{{title}}又显示了呢?不明白。

第2个问题呢:
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .expandertsp {
            border: 1px solid black;
            width: 250px;
        }
         .expandertsp > .title {
                background-color: black;
                color: white;
                padding: .1em .3em;
                cursor: pointer;
         }
         .expandertsp > .body {
                padding: .1em .3em;
            }
    </style>
</head>
<body ng-app='expanderModule'>
    <div ng-controller='SomeController'>
        <expander class='expandertsp' expander-title='title'>
           {{text}}
        </expander>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var expanderModule = angular.module('expanderModule', []);
        expanderModule.directive('expander', function () {
            return {
                restrict: 'EA',
                replace: true,
                transclude: true,
                scope: {
                    title: '=expanderTitle'
                },
                template: '<div>'
                         + '<div class="title" ng-click="toggle()">{{title}}</div>'
                         + '<div class="body" ng-show="showMe" ng-transclude ></div>'
                         + '</div>',
                link: function (scope, element, attrs) {
                    scope.showMe = false;
                    scope.toggle = function toggle() {
                        scope.showMe = !scope.showMe;
                    }
                }
            }
        });
        expanderModule.controller('SomeController', function ($scope) {
            $scope.title = '点击展开';
            $scope.text = ' class为"bodydiv 绑定的text为什么不显示呢?';
        });
    </script>
</body>
</html>
复制代码

自定义指令directive 里面的scope 理解局部变量 内部改变 不影响 其他控制器对应变量 解释正常?

我把 

scope: {
title: '=expanderTitle'
}里面的expanderTitle改成其他的 就显示不出来了  不理解。 =是双向绑定 可在控制器里面没看到 expanderTitle呢?

显示效果 

 

求解答

s_p的主页 s_p | 菜鸟二级 | 园豆:290
提问于:2016-09-27 16:15
< >
分享
最佳答案
0

不才刚学Angular没多久 还没理解透暂且给点建议作参考

这俩问题应该都是隔离scope的问题 第一个问题里面的scope已经被隔离了 text没有定义 而且这时的title也不是$scope.title

这个title是expander-title绑定的数据 恰恰你又绑到了$scope.title上。。

第二个问题 expanderTitle要去找expander-title 指令里面名字好像用驼峰法 外面使用的时候用的‘-’

刚学没多久可能说的不够明白还请见谅~

收获园豆:8
Mageric | 菜鸟二级 |园豆:210 | 2016-09-29 16:29

有些道理 

s_p | 园豆:290 (菜鸟二级) | 2016-10-19 09:03
其他回答(1)
0

ng-click="toggle()"错了;接的是表达式不是执行,去掉括号。

收获园豆:2
bloodymandoo | 园豆:210 (菜鸟二级) | 2016-09-29 19:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册