Javascript 将元素推入控制器中的数组时，不更新具有隔离作用域的指令_Javascript_Angularjs_Angularjs Directive

Javascript 将元素推入控制器中的数组时，不更新具有隔离作用域的指令

javascript angularjs

Javascript 将元素推入控制器中的数组时，不更新具有隔离作用域的指令,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图在我的页面上实现一个基本的最近搜索列表。单击“搜索”按钮时，两个输入被连接并推送到一个名为“recentSearchItems”的数组中。recentSearchItems以空数组开始，并且永远不会在指令上更新，即使它在homeCtrl上更新 index.html： <body ng-controller="HomeCtrl"> <div class="outer-wrapper"> <div class="main-wrapper" ng-class

我试图在我的页面上实现一个基本的最近搜索列表。单击“搜索”按钮时，两个输入被连接并推送到一个名为“recentSearchItems”的数组中。recentSearchItems以空数组开始，并且永远不会在指令上更新，即使它在homeCtrl上更新

index.html：

<body ng-controller="HomeCtrl">
<div class="outer-wrapper">
    <div class="main-wrapper" ng-class="{'search-page': searchClicked}" ng-show="uiRouterState.current.name == 'home'">
        <div class="home-logo" ng-class="{'animate': searchClicked}">
        </div>
        <div class="home-content-wrapper" ng-class="{'animate': searchClicked}">
            <div class="main-header" ng-class="{'animate': searchClicked}">
                Lorem ipsum dolor sit!
            </div>
            <div class="main-large-text" ng-class="{'animate': searchClicked}">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
            <form class="form-elements">
                <input type="text" class="large-textbox" name="looking-for" placeholder="I am looking for" ng-model="placeKeyword">
                <input type="text" class="medium-textbox" name="place" placeholder="Istanbul" ng-model="placeNear" style="margin-left: 10px;">
                <button ui-sref="home" class="search-btn" style="margin-left: 10px;" ng-click="startSearch()">
                    <span></span>
                </button>
            </form>
        </div>
    </div>
    <div ui-view></div>
    <div class="footer-wrapper">
        <div class="footer-links">
            <a href="#">About us</a>
            <a href="#">Contact</a>
            <a href="#">Blog</a>
        </div>
    </div>
</div>
</body>

指令：

placesApp.directive("recentSearches", () => {
    return {
        restrict: "E",
        replace: true,
        scope: {
            recentSearchItems: "="
        },
        templateUrl: "views/recent-searches.html"
    }
});

指令模板：

<div class="recent-searches">
    <h3>RECENT SEARCHES</h3>
    <hr class="under-header">
    <div class="recent-search-items" ng-repeat="recentSearchItem in recentSearchItems">
        <p ng-bind="recentSearchItem"></p>
        <hr>
    </div>
</div>


最近的搜索

向指令添加

bindToController:true

placesApp.directive("recentSearches", () => {
    return {
        restrict: "E",
        replace: true,
        scope: {
            recentSearchItems: "="
        },
        templateUrl: "views/recent-searches.html",
        bindToController: true
    }
});

您是否尝试了

{{}

而不是

ng bind

@JijoCleetus无任何更改请在实际使用控制器的位置添加代码，我看不到任何ng controller=“homectrl”或如果指令控制器是ddo@Karim在前2个htmls中添加了更多信息

<div class="recent-searches">
    <h3>RECENT SEARCHES</h3>
    <hr class="under-header">
    <div class="recent-search-items" ng-repeat="recentSearchItem in recentSearchItems">
        <p ng-bind="recentSearchItem"></p>
        <hr>
    </div>
</div>

placesApp.directive("recentSearches", () => {
    return {
        restrict: "E",
        replace: true,
        scope: {
            recentSearchItems: "="
        },
        templateUrl: "views/recent-searches.html",
        bindToController: true
    }
});