Question

我正在尝试做一些看似基本的事情，但我无法做到。

有一个简单的指令

app.directive('mainContent', function() {
return {
    restrict: 'E',
    scope: {
        content: "="
    },
    templateUrl: 'pages/home.html'
}
})

以及带有简单脚本的主页

<main-content content="content"></main-content>

<script type="text/javascript">
$( document ).ready(function() {
if (window.location.href.indexOf("?Admin") > -1) {
    $('.editable').attr('contenteditable','true');
}
});
</script>

该指令加载以下内容页面/ home.html

<div class="jumbotron text-center editable">Lorem ipsum</div>

我想我的脚本无法添加contenteditable =＆＃34; true＆＃34;属性，因为该指令正在创建一个childscope。

如果不在pages / home.html中添加我的脚本，我怎么能这样做？

此致

Answer 1

它不需要对范围做任何事情，只是Angular在加载它以实现它的魔力时会遍历HTML，并且你也在document.ready上执行JQuery代码。 / p>

那么，首先捕获的是什么？

可能JQuery无法找到您的代码，因为Angular尚未呈现该指令且未加载HTML。

我建议两件事：

使用Angular时不要使用JQuery。
如果你真的必须或者这只是某种练习，你可以将它包装在setTimeout中，这使得代码等待并在所有内容完成后执行。
```
setTimeout(function() {
    $('.editable').attr('contenteditable','true');
}, 0);
```

编辑：您可以在指令的链接功能中执行此操作，如下所示：

link: function (scope, element, attr) {
    $('.editable').attr('contenteditable','true');
}

Fiddle已更新。

从rootscope获取childscope元素

1 个答案: