1

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

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'
        }
    };
});
4

1 回答 1

0

看起来您的指令与 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以替换该行，但它是可选的

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

我用包含所需函数的链接函数替换了您的控制器和您的编译函数（没有要编译的元素，并且可以在这里完成添加函数而不是专用控制器）。正如我之前所说，我在 Save 按钮中添加了 editMode 更改行为，因此我添加了更多代码，但这不是重点，我认为您可能需要在此处进行更改以反映您的预期行为

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

++

于 2013-09-10T13:36:58.897 回答