Question

我整个下午一直在努力解决以下问题：我制定了一个显示搜索表单的指令。 searchterm的模型在控制器中定义，并与指令完美地通信。但是：当我将指令放在一个Angular模板中时，它是在DOM准备就绪后加载的，它只是指令的一种方式，而不是返回。

<body ng-app="myApp">
<div ng-controller="NewEditCtrl">

    <script type="text/ng-template" id="/tab-content.html">
    <!-- First position for the directive: The way back from the directive to here does not work -->
    <!-- Uncomment to test and show the console output ! -->

    <!-- <span mediasearch term="searchterm" enter="sendForm(e)" action="refreshAvailable()"></span> -->
    </script>
        <!-- Second position: Here the way back from the directive works perfectly -->
        <span mediasearch term="searchterm" enter="sendForm(e)" action="refreshAvailable()"></span>    
    <div id="tab-content" ng-include src="tabcontent"></div>

</div>

我把这个例子放在一个工作小提琴中：http://jsfiddle.net/RCaCM/2/请参阅评论。

我想这是一个范围问题，但我没有达到$ apply或$ compile的目的。

先谢谢你的帮助。 XL

Answer 1

正如@Sebastien指出的那样，ng-include创建了一个子范围。你必须绑定任何对象，它会工作，看到我更新的小提琴。

http://jsfiddle.net/cmyworld/JC28H/

不使用searchterm，而是使用类似

的内容

$scope.searchterm={value:''}

Answer 2

你是对的，这是一个范围问题：ng-include angular会创建一个子范围。因此，当您更改父作用域中的属性时，它也会更改子级中的值，但不会更改另一侧的值。如果你想要两者都链接，你应该是一个中间服务

另一种方法可以是从指令发出更改到父作用域，并在主作用域（或在rootcope中）中监听它：

http://jsfiddle.net/RCaCM/3/

指令中的双向绑定在模板内部不起作用

2 个答案: