我正在尝试创建一个小指令，允许一个简单的文本区域，或者一个选项，使其成为不可编辑的 div，直到单击铅笔图标，此时，将显示文本区域，以便显示内容可以编辑。保存功能需要由父 Controller 定义。
我对指令的调用如下:
<body ng-controller="AppController">
<my-dir togglesave=true contents="one" savecontents="savecontents(one)"></my-dir>
<my-dir togglesave=true contents="two" savecontents="savecontents(two)"></my-dir>
<my-dir contents="three" savecontents="savecontents(three)"></my-dir>
</body>
这是js:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.one = "one";
$scope.two = "two";
$scope.three = "three";
$scope.savecontents = function(obj){
alert(obj);
}
})
app.directive('myDir', function() {
return {
required: '^ngModel',
restrict: 'E',
scope: {
contents: '=',
togglesave: '=',
savecontents: '&'
},
templateUrl: 'template.html',
link: function(scope, element, attrs) {
scope.pencil = false;
}
};
})`
这是模板:
<div ng-show="editing || !togglesave">
<textarea ng-model="contents"></textarea>
</div>
<div ng-mouseenter="pencil = true" ng-mouseleave="pencil= false" ng-show="!editing && togglesave">{{contents}}
<button ng-show="pencil" ng-click="editing = true"><i class="fa fa-pencil"></i></button>
</div>
<span ng-show="editing"><button ng-click="savecontents()">save</button></span>
我需要在父级中定义的 savecontents 函数以某种方式让指令知道它已完成保存，以便“编辑”标志可以设置为 false，并且文本区域和保存按钮隐藏，以及不可编辑的 div展示。我对 Angular 比较陌生，不确定我是否以正确的方式处理这个问题。
感谢任何帮助:)
一和二被定义为具有这种切换行为。三只是文本区域。
额外的问题是，内容可能是一个复杂的对象，具体取决于调用它的人。我希望指令了解整个对象，因为显示可能是一个特定的参数。但保存函数可能需要了解整个对象。有没有简单的方法可以做到这一点？就像 - 如果内容是一个基元，则只显示它，但如果它是一个对象，则告诉指令应该显示什么参数，同时允许保存函数拥有有关完整对象的信息？
最佳答案
1) 第三个元素未显示切换行为是因为您没有将第三个元素的togglesave 属性传递为true。
<my-dir togglesave=true contents="one" savecontents="savecontents(one)"></my-dir>
<my-dir togglesave=true contents="two" savecontents="savecontents(two)"></my-dir>
<my-dir contents="three" savecontents="savecontents(three)"></my-dir>
因此，tooglesave 属性在 template.html 的指令范围内未定义，并且 !undefined = true，因此它显示文本区域而不是切换行为。
<div ng-show="editing || !togglesave">
<textarea ng-model="contents"></textarea>
</div>
2) template.html 文件绑定(bind)到“my-dir”指令的范围。您没有创建 savecontents 函数作为指令的属性，然后从父 Controller 传递它，因为您已经可以在指令范围内的内容属性中访问从父 Controller 传递的对象。
您所要做的就是在单击“保存”按钮时在指令中编写一个函数，这使得编辑标志为 false 以及您想要对对象执行的任何操作。因此您的 app.js 和 index.html 将更改为像这样的东西:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.one = "one";
$scope.two = "two";
$scope.three = "three";
// Passing this function to the directive savecontents attributed so that this function can be executed by the directive.
$scope.savecontents1 = function(obj){
//saving data for obj 1
alert(obj);
}
$scope.savecontents2 = function(obj){
//saving data for obj 1
alert(obj);
}
$scope.savecontents3 = function(obj) {
//saving data for obj 1
alert(obj);
};
})
app.directive('myDir', function() {
return {
required: '^ngModel',
restrict: 'E',
scope: {
contents: '=',
togglesave: '='
},
templateUrl: 'template.html',
link: function(scope, element, attrs) {
// Calling the savedata method from the directive's template (template.html) on click of save button
scope.savedata = function() {
// It will execute the function passed from the parent controller.
scope.savecontents();
scope.editing = false;
}
}
};
})
还有你的index.html
<my-dir togglesave=true contents="one" savecontents="savecontents1(one)"></my-dir>
<my-dir togglesave=true contents="two" savecontents="savecontents2(two)"></my-dir>
<my-dir togglesave=true contents="three" savecontents="savecontents3(three)"></my-dir>
我希望这会有所帮助。
关于javascript - 将父函数与 & from 指令一起使用以实现自定义行为，但需要回调？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40070668/