AngularJS：指令范围与控制器范围冲突答案

【问题标题】：AngularJS: Directive scope conflicting with controllers scopeAngularJS：指令范围与控制器范围冲突
【发布时间】：2013-05-28 04:48:39
【问题描述】：

我正在使用 AngularJS 开发一个项目，我遇到了 2 个作用域冲突的问题： - 我有控制器在我的 DOM 的不同位置定义范围（效果很好） - 我刚刚添加了 3 个指令来实现“帮助”工具提示功能，就像 jQuery (http://heelhook.github.io/chardin.js/) 中的 chardin.js 插件一样：一个能够一次触发它们的主指令，一个触发按钮上的“子”指令，以及一个“子”指令，用于标记我想要工具提示的每个 DOM 元素。

当我只有这 3 个指令时，它工作得很好，但是当我同时实现我的控制器和我的指令时，我不能再使用我的控制器了（范围似乎完全错误......）

我的结构是这样的：

html -> 主控制器
4 个部分 -> 4 个控制器

我在正文（主要）上添加了 1 个指令，在某处的按钮上添加了 1 个指令，在 4 个部分的各个元素上添加了 1 个指令...

我知道我的解释很混乱，但我真的为我在这里的第一条信息尽了最大努力！

如果你想查看我为指令编写的代码，这里是：http://plnkr.co/edit/GrwgkH?p=preview

非常感谢您的帮助

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

尝试将控制器的作用域模型包装在某个对象中。原始值（例如，数字、字符串、布尔值）通过其自己的同名属性隐藏在子作用域中。

在 AngularJS github wiki 上的 Understanding Scopes 中阅读更多信息。

【讨论】：

我已经阅读了 Angular 网站上的所有文档，并且我已经查看了 github 上的代码，但我还没有考虑过 wiki！谢谢你的想法！
目前，我有 2 个解决方案：忘记指令，并使用我使用 angular.element.find 和属性测试的服务来重建没有 jquery 的 jquery 插件（它工作得很好但我不喜欢测试所有 dom 元素来检查它们的属性。）我的第二个想法是使用指令填充位于服务中的元素数组，然后使用服务映射数组，所以为了消除所有 DOM 元素的第一次测试以找到具有我的属性的那些...
不幸的是，我的第二个选项不起作用，因为我有这个问题：我的指令可以在 dom 中的任何地方，并且可以有嵌套元素（html 的其余部分）。但是那些嵌套元素无法访问在我的指令上方定义的初始控制器！
叫我疯了，但我可能有一个解决方案......我需要的是保持嵌套 dom 元素的范围是指令的父元素的范围。 Transclude 所做的，除了要使用 transclude，我需要定义一个模板，并用这个模板替换我的指令。结果是将我的指令元素嵌入到一个新元素中（例如一个 div）。假设我首先有：
stuff here like dom elements
，我最终会得到一个
stuff here like dom elements
，这不是很不错。
我的答案的结尾已经被删除了，所以这里是我使用的解决方案：我可以使用控制器功能，并使用 $transclude 预定义的功能来实现我自己的嵌入方法：元素。追加（克隆）！然后我得到了与我的指令之前完全相同的 dom 元素......完美！

【解决方案2】：

我最终也遇到了原始值的问题。我最终使用 Sugar.js 和 Object.extended() 创建了一个 $scope.context 对象，我将模型数据存储在该对象上。这也允许轻松缓存数据。

【讨论】：

感谢您的提示，我会查看sugar.js