angular directive几个问题。求解释

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呢？

显示效果

求解答

呼啦一阵风

浏览 520回答 2

2回答

qq_花开花谢_0

不才刚学Angular没多久还没理解透暂且给点建议作参考这俩问题应该都是隔离scope的问题第一个问题里面的scope已经被隔离了 text没有定义而且这时的title也不是$scope.title 这个title是expander-title绑定的数据恰恰你又绑到了$scope.title上。。第二个问题 expanderTitle要去找expander-title 指令里面名字好像用驼峰法外面使用的时候用的‘-’ 刚学没多久可能说的不够明白还请见谅~

0 0

达令说

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

0 0

随时随地看视频慕课网APP