Question

我已经编写了一个指令（内联编辑）并在编译函数中操作了DOM，但是如何才能使我添加的其他指令工作？我想我需要编译它，但是怎么样？在这里查看我的jsfiddle：http://jsfiddle.net/tidelipop/m4gbZ/ ng-click不能正常工作，但奇怪的是，为什么ng-bind工作？如果你在dev工具中取消隐藏textarea，你可以看到它确实有效。

angular.module('MyApp', [], function($compileProvider){
    $compileProvider.directive("inlineEdit", function($compile, $q){
        return {
            restrict: "A",
            scope: true,
            controller: function($scope){
                $scope.editMode = true;
                $scope.save = function(){
                    console.log("Saving...");
                };
            },
            compile: function(tElement, tAttrs){
                tElement
                    .attr("ng-hide", "editMode")
                    .attr("ng-click", "editMode=!editMode")
                    .after("<textarea ng-show=\"editMode\" ng-model=\""+tAttrs.ngBind+"\"></textarea><button ng-click=\"save()\">Save</button>");

                //var scopeResolver = $q.defer();
                //$compile(tElement.parent().contents())(scopeResolver.promise);

                return function(scope, element, attrs, controller){
                    //scopeResolver.resolve(scope);
                    //$compile(element.parent().contents())(scope);
                    console.log(element.parent().contents());
                };
            }
        };
    });
})


.controller("UserAdminCtrl", function($scope){
    $scope.data_copy = {
        user: {
            user_id: 'sevaxahe',
            comment: 'test'
        }
    };
});

Answer 1

看起来你的指令与ng-bind冲突，我真的不知道为什么，但是我问自己看你的代码的问题是：使用模板和custon属性是不是更容易模型（而不是ng-bind）？
答案是肯定的！
实际上这只是我的意见，但这是我通过修改你的代码http://jsfiddle.net/DotDotDot/m4gbZ/73/来做的我让你看看，我不得不改变一些部分（ng-click在textarea上运行不正常，所以我把这个行为放在了Save按钮上），但我认为这几乎就是你想要的。在代码方面，我修改了HTML以避免调用ng-bind，使用将在指令中捕获的自定义范围变量：

<span inline-edit ff="data_copy.user.comment">First</span>

在指令方面，我摆脱了所有编译/控制器的东西，我添加了一个模板

return {
        restrict: "A",
        template:'<div><span ng-hide="editMode" ng-click="editMode=!editMode">{{aModel}}</span><textarea ng-show="editMode" ng-model="aModel"></textarea> <button ng-click="save()">{{getLabel()}}</button></div>',
        replace:true,
        scope: {aModel:'=ff'},
        link:  function(scope, element, attrs){
            console.log(element)
            scope.editMode = true;
            scope.save = function(){
                console.log("Saving...");
                scope.editMode=!scope.editMode;
                };
            scope.getLabel=function(){
             if(scope.editMode)
                 return "Save";
             else
                 return "Change";
            }
            console.log(element.parent().contents());
            }

    }

为什么？模板，因为angular会自行编译它而不需要任何干预我添加replace:true来替换该行，但它是optionnal

范围部分更重要。 scope: {'=ff'}告诉angular我想使用一个隔离的范围，我希望scope.aModel值与HTML中传递的ff变量绑定。
'='表示将从父作用域评估修改，并且每个修改都将反映在父作用和指令中

我通过包含所需功能的链接功能替换了你的控制器和你的编译功能（没有要编译的元素，并且可以在这里添加功能而不是专用控制器）。正如我之前所说，我将editMode更改行为添加到Save按钮，所以我添加了更多代码，但这不是主要观点，我认为您可能需要在此更改内容以反映您的预期行为

我希望这会对你有所帮助，因为我没有真正回答你的问题，但我认为你也可以探索这种方式

++

在指令中操纵DOM，现在是什么？

1 个答案: