解决方案 1 - 将
解决方案 2 - 使用
我有一个内联编辑指令，它工作得很好，如下所示： plnkr
我有另一个指令可以将名称从 1 个输入解析为 json 数据，也可以正常工作：plnkr
当我组合 2 个指令时，我可以在控制台中打印解析后的名称 json，但不能在客户端上打印
看到这个 plunker： PLNKR
// this is the save function in the directive
scope.save = function() {
scope.editMode = false;
parsedName = NameParse.parse(scope.model);
console.log('Prefix: ' + parsedName.salutation);
console.log('First Name: ' + parsedName.firstName);
console.log('Last Name: ' + parsedName.lastName);
scope.handleSave({value: scope.model});
};
单击"铅笔"图标进行编辑，然后单击保存按钮并检查控制台。 数据就在那里。 虽然客户端上什么都没有。
我错过了什么？
您的指令正在使用隔离作用域。默认情况下，此作用域上公开的属性等对外部作用域不可用。
呈现的 HTML 的简化示例：
<body>
<span class="editableContainer ng-isolate-scope">
...
Directive's scope available here
...
</span>
Directive's scope not available here
</body>
如果希望外部作用域有权访问隔离作用域上公开的内容，则需要将其显式添加到作用域对象哈希中。
解决方案 1 - 将parsedName添加到范围对象哈希：
scope: {
model: '=model',
parsedName: '=',
handleSave: '&onSave',
handleCancel: '&onCancel'
}
和：
scope.save = function() {
scope.editMode = false;
scope.parsedName = NameParse.parse(scope.model);
scope.handleSave({
value: scope.model
});
};
.HTML：
<form-input model="name" parsed-name="parsedName" ...
控制器：
// Actually not needed, but usually good for clarity.
$scope.parsedName = {};
演示：http://plnkr.co/edit/YCoUiA3KpAouCCd5KQLP?p=preview
解决方案 2 - 使用handleSave函数：
// Leave unchanged
scope: {
model: '=model',
handleSave: '&onSave',
handleCancel: '&onCancel'
}
和：
scope.save = function() {
scope.editMode = false;
var parsedName = NameParse.parse(scope.model);
scope.handleSave({
name: scope.model,
parsedName: parsedName
});
};
.HTML：
<form-input model="name" on-save="saveEditable(name, parsedName)" ...
控制器：
$scope.saveEditable = function(name, parsedName) {
$scope.name = name;
$scope.parsedName = parsedName;
};
演示：http://plnkr.co/edit/OZ57jRtuzgn5CZSA5t90?p=preview