0

我整个下午都在尝试解决以下问题：我制定了一个显示搜索表单的指令。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 来说明问题。

提前感谢您的帮助。特大号

4

2 回答 2

1

As @Sebastien pointed, ng-include creates a child scope. You have to bind any object and it would work, see my updated fiddle.

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

Instead of using searchterm, use something like

$scope.searchterm={value:''}
于 2013-08-21T17:10:13.040 回答
0

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

另一种方法可能是将指令中的更改发送到父作用域，并在主作用域（或根作用域）中监听它：

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

于 2013-08-21T16:55:36.823 回答