Javascript 两个指令之间的角度指令范围共享

我在一个项目中工作，我有一个控制器和两个指令，我需要在它们之间共享范围，我已经创建了

代码结构如下所示：

主控制器

--可绘制指令

----绘制矩形指令

在

Main ctrl

中，有一个对象

roi

位于范围上，我要

Drawable

和

Draw rectangle

指令。单击drawable，它会更新到主控制器的范围，但当我单击draw rectangle指令时，它不会更新范围

我希望使用双向数据绑定同步所有

（3）

作用域

这在概念上似乎是正确的，但为什么不从

Draw rectangle

指令更新范围呢

---

提前谢谢

您正在为两个指令使用隔离作用域。隔离作用域将创建一个子作用域。因此，您不能从指令的链接函数中访问“ROI”。 请在删除隔离作用域后重试

 scope: {
    rois: '='
 },

---

你需要停止冒泡事件，因为当rect指令点击时，drawable也会触发点击！使用event.stopPropagation（）

var-app=angular.module（'myApp'）；
应用程序指令（'可提取'，['$document'，
职能（文件）{
返回{
限制：“EA”，
范围：{
ROI:“=”
},
链接：函数（范围、元素、属性）{
控制台日志（scope.rois）；
元素上（'click'，函数（事件）{
event.stopPropagation（）；
scope.rois=[{
名字：“斯塔克”，
城市：“浦那”
}, {
名称：“公司”，
城市：“孟买”
}];
作用域：$apply（）；
控制台日志（scope.rois）；
});
}
};
}
]);
应用程序指令（'drawRectangle'，['$document'，
职能（文件）{
返回{
限制：“EA”，
范围：{
ROI:“=”
},
链接：函数（范围、元素、属性）{
元素上（'click'，函数（事件）{
event.stopPropagation（）；
scope.rois=[{
名称：“Meuk”，
城市：“浦那”
}, {
姓名：“托尼”，
城市：“孟买”
}];
作用域：$apply（）；
控制台日志（scope.rois）；
});
}
};
}
]);当您单击“绘制矩形”时，您也在单击“可绘制”，因为“绘制矩形”位于“可绘制”内。必须使用event.preventDefault（）停止从“绘制矩形”到“可绘制”的传播；如下：


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.rois=[{
名字：“杰克”，
城市：“浦那”
}, {
姓名：“托尼”，
城市：“孟买”
}];
$scope.test=“test”；
});
应用指令（“可提取”[
函数（）{
返回{
限制：“EA”，
链接：函数（范围、元素、属性）{
元素上（'click'，函数（事件）{
event.preventDefault（）；
scope.rois=[{
名字：“斯塔克”，
城市：“浦那”
}, {
名称：“公司”，
城市：“孟买”
}];
作用域：$apply（）；
控制台日志（scope.rois）；
});
}
};
}
]);
应用程序指令（'drawRectangle'[
函数（）{
返回{
限制：“EA”，
链接：函数（范围、元素、属性）{
元素上（'click'，函数（事件）{
event.stopPropagation（）；//停止传播
event.preventDefault（）；
scope.rois=[{
名称：“Meuk”，
城市：“浦那”
}, {
姓名：“托尼”，
城市：“孟买”
}];
作用域：$apply（）；
控制台日志（scope.rois）；
});
}
};
}
]);

点击我！



{{rois | json}}