如何从另一个HTML文件访问ng-model?

时间:2018-02-07 09:51:44

标签: html angularjs

我有一个index.html文件:

的index.html

<div>
    <a class="btn btn-primary" ng-click="showModal()" href="#">Add Widget</a>
    <label>Edit mode</label>
    <input type="checkbox" ng-model="edit">
</div>

一个名为 Bar.html

的文件
<div>
    <i ng-show="edit" class="fa fa-trash icon-options"></i>
    <i ng-show="edit" class="fa fa-cog icon-options"></i>
    <i class="fa fa-refresh icon-options"></i>
    <i ng-hide="loading" class="fa fa-spinner fa-spin icon-options"></i>
    <div class=Bar></div>
</div>

当我点击复选框时,它必须隐藏图标。当我将所有代码放在 Index.html 中时,这都有效。我想编写更清晰的代码,所以我决定将文件分开。当我分离文件时,它不起作用。

有没有办法从 Bar.html 文件中访问ng-model="edit"

亲切的问候

更新仪表板控制器:

generalApp.controller('DashBoardcontroller', ['$scope', '$mdDialog', '$http', '$element', function ($scope, $mdDialog, $http, $element) {

this.$onInit = function (){
   $http({
            method: 'GET',
            url: 'Dashboard/GetDashboard'
        }).then(function successCallback(response) {
            $scope.dashboard = response.data;
            // var widgets = tryJsonConvert($scope.dashboard.Widgets);
        }, function errorCallback(response) {
            console.log(response);
        });

}
}]);

所有内容都在 Index.html

的部分
<div>
    <a class="btn btn-primary" ng-click="showModal()" href="#">Add Widget</a>
    <label>Edit mode</label>
    <input type="checkbox" ng-model="edit">
</div>
<div>
<i ng-show="edit" class="fa fa-trash icon-options"></i>
    <i ng-show="edit" class="fa fa-cog icon-options"></i>
    <i class="fa fa-refresh icon-options"></i>
    <i ng-hide="loading" class="fa fa-spinner fa-spin icon-options"></i>
</div>

1 个答案:

答案 0 :(得分:2)

只需在bar.html中添加所需的代码,然后按以下方式添加文件。

<强>的index.html

<i ng-show="edit" class="fa fa-trash icon-options"></i>
    <i ng-show="edit" class="fa fa-cog icon-options"></i>
    <i class="fa fa-refresh icon-options"></i>
    <i ng-hide="loading" class="fa fa-spinner fa-spin icon-options"></i>
</div>

<强>一个bar.html

{{1}}