Question

所有

目前，我的指令代码看起来非常简单：

    <div ng-controller='main'>
        <dirtest></dirtest>
        <dirtest></dirtest>
    </div>

<script>
     var app = angular.module("vp", []);
        app.controller("main", function($scope){
            $scope.name="init name";
        })

        app.directive("dirtest", function($compile){
            return {
                restrict: "E",
                scope: false,
                controller : function($scope){
                },
                compile: function(tEl, tAttrs){
                    return {
                        post: function(scope, el, attrs, ctrl){
                            el.append($compile("<button class='dirbtn'>{{name}}</button>")(scope));
                            $("button.dirbtn").on("click", function(){
                                scope.name = Math.random();
                                console.log(scope.name);
                                scope.$apply();
                            });
                        }
                    };
                }
            }
        });
</script>

此代码应该执行的操作：点击任意按钮，更改所有按钮文字。

第一个问题： 而不是使用$ compile来编译硬编码范围数据模型{{name}}，有没有一种方法可以编程方式将数据绑定到动态添加的DOM？

第二个问题： 当我向页面添加两个脏指令时，一个奇怪的事情是点击第一个按钮将调用它的帖子链接功能两次（我们可以从控制台告诉我，当我点击第一个时生成了两个数字按钮）而第二个只有一次。我该如何解决这个问题？

由于

Answer 1

试试这个：

<script>
     var app = angular.module("vp", []);
        app.controller("main", function($scope){
            $scope.name="init name";

            $scope.clickfunc = function(){
                $scope.name = Math.random();
                console.log($scope.name);
            });
        })

        app.directive("dirtest", function($compile){
            return {
                restrict: "E",
                scope: false,
                controller : function($scope){
                },
                compile: function(tEl, tAttrs){
                    return {
                        post: function(scope, el, attrs, ctrl){
                            el.append($compile("<button class='dirbtn' ng-click='clickfunc()'>{{name}}</button>")(scope)); 
                        }
                    };
                }
            }
        });
</script>

如何在指令中绑定数据模型并正确设置事件处理程序

1 个答案: