Question

我有一个指令，我想将一个变量从我的控制器传递到我的指令的HTML模板。
dataLoading始终未定义。

从我的控制器中，我创建一个isMapping并将其作为1启动，然后使用data-Loading="{{isMapping}}"将其绑定到我的指令。然后，我的指令中的dataLoading在我的模板中用作ng-show="dataLoading == 1"

但是，正如我之前所说，dataLoading总是未定义的。

这是我的代码

app.js

.directive('btnLoading', function () {
return {
    scope: {
        loadingText: '@',
        loadingIconClass: '@',
        mainText: '@',
        mainIconClass: '@',
        dataLoading: '@',
        btnClass: '@',
        actionFunc: '&'
    },
    replace: true,
    restrict: 'E',
    templateUrl: 'service/templates/btn-template.html',
    controller: ['$scope', function ($scope) {
        $scope.action = function () {
            eval($scope.actionFunc);
            alert($scope.dataLoading);
            };
        }]
}
});

服务/模板/ BTN-template.html

<div>
<button ng-show="dataLoading == 1" type="button" ng-class="btnClass" ng-click="action()"><i ng-show="mainIconClass" ng-class='mainIconClass'></i> {{mainText}}</button>
<span ng-show="dataLoading != 1">
    <span class="fa fa-spin ">
        <span aria-hidden="true" class="iconclass"></span>
    </span>
    <i ng-show="loadingIconClass" ng-class='loadingIconClass'></i>{{loadingText}}
</span>

CSHTML

<btn-Loading data-Loading="{{isMapping}}"
                                 loading-text="..loading.." 
                                 loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate" 
                                 main-text="Map Files"
                                 main-icon-class="glyphicon glyphicon-retweet"
                                 btn-class="btn btn-primary" 
                                 action-func="TestButton()"></btn-Loading>

我的控制器指令链接到这个代码。

app.controller('ctrl', function ($scope,$timeout, $q, Srv) {

$scope.TestButton = function () {
    $scope.isMapping = 1;
    $timeout(function () { $scope.isMapping = 0 }, 1500);
}

$scope.isMapping = 1;
}

基于RandyPrad，这里的答案是工作代码..

.directive('btnLoading', function () {
return {
    scope: {
        loadingText: '@',
        loadingIconClass: '@',
        mainText: '@',
        mainIconClass: '@',
        isLoading: '@',
        btnClass: '@',
        actionFunc: '&'
    },
    replace: true,
    restrict: 'E',
    templateUrl: 'service/templates/btn-template.html',
    controller: ['$scope', function ($scope) {
        $scope.action = $scope.actionFunc;
        }]
}

}）;

服务/模板/ BTN-template.html

<div>
<button ng-if="!(isLoading == 1)" type="button" ng-class="btnClass" ng-click="action()"><i ng-show="mainIconClass" ng-class='mainIconClass'></i> {{mainText}}</button>
<span ng-if="isLoading == 1" ng-class="btnClass" >
    <span ng-if="loadingIconClass" class="fa fa-spin "><i ng-class='loadingIconClass'></i></span> {{loadingText}}
 </span>

mvc.cshtml

<btn-Loading is-loading="{{isMapping}}" loading-text="..loading.." loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate" main-text="Map Files" main-icon-class="glyphicon glyphicon-retweet" btn-class="btn btn-primary" action-func="TestButton()"></btn-Loading>

我的控制器指令链接到这个代码。

    app.controller('ctrl', function ($scope,$timeout, $q, Srv) {

$scope.TestButton = function () {
    $scope.isMapping = 1;
    $timeout(function () { $scope.isMapping = 0 }, 1500);
}

$scope.isMapping = 1;
}

希望这有助于某人。

Answer 1

我发现了2个问题

1）您在命名时使用data，因此如果您需要data-loading访问道具，则应使用data-data-loading;

  <btn-Loading data-data-loading="{{isMapping}}"
                             loading-text="..loading.." 
                             loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate" 
                             main-text="Map Files"
                             main-icon-class="glyphicon glyphicon-retweet"
                             btn-class="btn btn-primary" 
                             action-func="TestButton()"></btn-Loading>

2）您使用数据 - L oading而非数据 - l oading

JSFiddle example

Answer 2

我不确定我的回答。如果您正在使用数据加载，它将把它作为html5中的数据属性。更改名称并检查它

angular.js指令将变量传递给模板

2 个答案: