我有一个内联编辑的指令，它完美无缺，如下所示：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});
};
单击“铅笔”图标进行编辑，然后单击“保存”按钮并检查控制台。数据就在那里。但是客户端没什么。
我错过了什么？
答案 0 :(得分：0)
您的指令使用隔离范围。默认情况下，此范围上公开的属性等不可用于外部范围。
呈现HTML的简化示例：
<body>
<span class="editableContainer ng-isolate-scope">
...
Directive's scope available here
...
</span>
Directive's scope not available here
</body>
如果希望外部作用域可以访问隔离范围上公开的内容，则需要将其显式添加到作用域对象哈希中。
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
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;
};