首页 新闻 赞助 找找看

angular 自定义指令双向绑定问题 (使用=)

0
悬赏园豆:30 [已解决问题] 解决于 2015-10-20 11:15

在指令内部

scope:{

  a:'='

}

 

link:function($scope){

  $scope.a='bbb';

}

 

在父controller里获取a的值,总是慢一步才能获取,是什么原因?做测试,在父contoller定义个方法,直接取$scope.a的值,第一次取的是指令内部前一次的值,需要获取两次,才能取到正确的值?谁能帮忙解答下!非常感谢!

flyfish1986的主页 flyfish1986 | 初学一级 | 园豆:6
提问于:2015-10-13 18:38
< >
分享
最佳答案
0

你需要贴出完整的代码,否则无法判断,另外这个是双向绑定,你可以在父controller使用{{a}}测试,前提是使用指令的时候<xxx a="a">

收获园豆:30
幻天芒 | 高人七级 |园豆:37175 | 2015-10-14 09:18

麻烦看下,谢谢!!

 

外部controller的定义

 function ($scope, $modal, menuItemService) {        

        $scope.selectedId = '';

}

 

 

指令定义:

appModule.directive('menuTree', [
        function () {
            return {
                restrict: 'E',
                template: '<div  class="div-tree"></div>',
                scope: {
                    loadData: '=',
                    selectNodeId:'='
                },
                link: function ($scope, element, attrs) {

        var yMenuTree = $(element).find('.div-tree');

        yMenuTree.on("changed.jstree", function (e, data) {
                            console.log(data.selected);
                            $scope.selectNodeId = data.selected;//在这里给内部属性赋值,现在在外面controller通过点击按钮获取内部变化的这个值,第一次点击获取不到,需要点击两次,才能获取到变化的值!
                            //console.log(data.selected);
                        });

                }

             }

          ]);

flyfish1986 | 园豆:6 (初学一级) | 2015-10-14 09:26

麻烦看下,谢谢!!

 

外部controller的定义

 function ($scope, $modal, menuItemService) {        

        $scope.selectedId = '';

}

 

 

指令定义:

appModule.directive('menuTree', [
        function () {
            return {
                restrict: 'E',
                template: '<div  class="div-tree"></div>',
                scope: {
                    loadData: '=',
                    selectNodeId:'='
                },
                link: function ($scope, element, attrs) {

        var yMenuTree = $(element).find('.div-tree');

        yMenuTree.on("changed.jstree", function (e, data) {
                            console.log(data.selected);
                            $scope.selectNodeId = data.selected;//在这里给内部属性赋值,现在在外面controller通过点击按钮获取内部变化的这个值,第一次点击获取不到,需要点击两次,才能获取到变化的值!
                            //console.log(data.selected);
                        });

                }

             }

          ]);

 

指令的使用方式:

<menu-tree load-data="treeData"  select-node-id="selectedId"></menu-tree>

flyfish1986 | 园豆:6 (初学一级) | 2015-10-14 09:27

@flyfish1986: 你是在原生事件中,给$scope赋值的,这个时候,你需要在赋值之后手动调用一次$apply()。

$scope.selectNodeId = data.selected;
if(!$scope.$$phase){
  $scope.$apply();  
}
幻天芒 | 园豆:37175 (高人七级) | 2015-10-14 10:46

@幻天芒: 非常感谢!!我查到这个了,好像是说如果使用的是angular的方法的话就不需要,如果是原生的,就需要使用$apply方法!!!

 

再请教个问题:我看angular的bootstrap ui中的源码,发现link函数有第五个参数是transclude,这个参数代表什么?

flyfish1986 | 园豆:6 (初学一级) | 2015-10-14 18:29

@flyfish1986: 这个参数是指,是否要把你元素的text,设置到指令模板的ng-transclude元素中去。比如

<div direc="xx">ABCDE</div>

directive('direc')
template: '<span ng-transclude></span>'
这个时候的话,生成的元素就应该是
<span>ABCDE</span>
也就是把元素本身的text,设置到指令内部包含ng-transclude的属性上去了。
幻天芒 | 园豆:37175 (高人七级) | 2015-10-14 21:11

@幻天芒: 谢谢!!

flyfish1986 | 园豆:6 (初学一级) | 2015-10-20 11:14

@flyfish1986: :)

幻天芒 | 园豆:37175 (高人七级) | 2015-10-20 11:50

@幻天芒: 你好,有个问题请教下:

appModule.directive("selecttable", ['DTOptionsBuilder',
function (DTOptionsBuilder) {
return {
restrict: 'AE',
//scope:{
// apiUrl: '@',
// dtColumns:'='
//},
//require: '^?datatable',
//require: 'ngModel',
template: "<div class=\"dropdown custom-select\">\n" +
"<div class=\"input-group\">\n" +
"<input type=\"text\" class=\"form-control\" />\n" +
"<span class=\"input-group-addon\" ng-click=\"vm.dropdown = !vm.dropdown\">\n" +
"<i class=\"glyphicon glyphicon-chevron-down\"></i>\n" +
"</span>\n" +
"</div>\n" +
"<div class=\"dropdown-menu collapse \" ng-class=\"{in: vm.dropdown}\">\n" +
"<table datatable=\"\" dt-options=\"dtOptions\" dt-columns=\"dtColumns\" dt-instance=\"dtInstance\" class=\"table table-striped table-bordered table-hover\"> </table>\n" +
"</div>\n" +
"</div>\n"

 

 

如上是我自定义一个指令,在模板里红色的datatable是一个现成的第三方的指令,我现在需要把外部controller定义的作用域里的属性传到自定义指令中应用的这个datatable的作用域中去,该如何做呢?现在只能传到自定义的指令的作用域里,如何再传进去到datatable这个指令的作用域中去呢?

 

谢谢!!!

flyfish1986 | 园豆:6 (初学一级) | 2016-09-01 14:35

@flyfish1986: 这里面就要看datatable本身是如何实现的。根据它的用法来。因为在你的指令中已经能拿到controller的变量了,所以只需要按照datatable的用法传给它即可。

幻天芒 | 园豆:37175 (高人七级) | 2016-09-01 21:34

@幻天芒:

谢谢您的解答!

这样算不算是我的selecttable指令依赖datatable指令?那样的话link函数第四个参数是能够取到datatable的指令的controller暴露的方法。我昨天调试,发现好像是先进的datatable指令的link函数,然后才进的我定义的指令的link函数。

flyfish1986 | 园豆:6 (初学一级) | 2016-09-02 08:55

@flyfish1986: 这个不影响的,只有在require中配置的依赖,才会拿到controller。

幻天芒 | 园豆:37175 (高人七级) | 2016-09-02 09:09

@幻天芒: 好的,那我就需要看下datable指令里controller方法如何把值传进去就可以了。谢谢!

flyfish1986 | 园豆:6 (初学一级) | 2016-09-02 09:18

@flyfish1986: 不用去考虑它的controller,就把你的指令当成一个controller,然后在controller中用第三方组件。

幻天芒 | 园豆:37175 (高人七级) | 2016-09-02 09:22

@幻天芒: 还是不理解,我自己的指令,里面需要用到第三方的指令,然后配置了require,但是link函数的第四个参数为null,获取不到,还有你说的不用考虑它的controller,那如何把datatable的配置项传到它的指令内部去呢?

flyfish1986 | 园豆:6 (初学一级) | 2016-09-07 16:58

@flyfish1986: 就是你不要把你的指令当成是一个指令,那这个时候你应该怎么用第三方指令呢?

幻天芒 | 园豆:37175 (高人七级) | 2016-09-07 22:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册