对自定义行为使用父函数with & from指令，但需要回调吗？
我试图做一个小指令，允许一个简单的文本区域，或者一个选项，使它成为一个不可编辑的div，直到一个铅笔图标被点击，此时，文本区域被显示，以便内容可以被编辑。保存功能需要由父控制器定义。
我对这些指令的引用如下：
<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，并隐藏textarea和save按钮，以及不可编辑的div显示。我对角度比较陌生，我不确定我是否会这样做。
(赞赏任何援助:)
这里有一个Plnkr
第一个和第二个被定义为具有这种切换行为。三是文本区域。
额外的问题是，内容可能是一个复杂的对象，这取决于谁调用它。我希望指令了解整个对象，因为显示可能是一个特定的参数。但是保存函数可能需要了解整个对象。有什么简单的方法吗？比如-如果内容是一个原语，只需显示它，但是如果它是一个对象，告诉指令应该显示什么参数，同时允许保存函数获得有关完整对象的信息？
回答 1
Stack Overflow用户
发布于 2016-10-16 16:33:38
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文件绑定到“my-dir”指令的作用域。您没有为您的指令创建保存函数作为属性，然后从父控制器传递它，因为您已经可以访问指令作用域中contents属性中从父控制器传递的对象。
您所要做的就是在单击“保存”按钮时在指令中编写一个函数，这会使编辑标志为false，无论您想要对objects.So做什么--您的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>我希望这能帮到你。
https://stackoverflow.com/questions/40070668
复制相似问题
腾讯云开发者
