Question

我有一个指令，表格中给出了其余的html。该指令如下：

这是指令的html

  <div test
  input="{{guage.input}}"
  >
  </div>

angular.module('test', [])

        .directive('test', function () {
            "use strict";

            return {

                restrict: 'A',

                scope: {
                    input: '='
                },

                templateUrl: 'gauge/gauge.tpl.html',

                replace: true
    });

以下是指令编译后加载的html。

<div ng-controller="Testing">
<div>
    <div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
    </div>
</div>
</div>

现在我在这个dom元素名称上面有一个父控制器是Testing。

如果我将{{guage.input}}更改为不显示，请从我的控制器。

这是我的控制器

app.controller('Testing',['$scope','newdataLoad','$timeout',function($scope, newdataLoad, $timeout){
        $scope.gauge = {};
$scope.gauge.input = 0;
});

我的范围有什么问题。

Answer 1

由于您的范围使用input定义=，因此您不需要表达式括号。

<div test input="guage.input">

使用表达式括号将破坏双向绑定。

优化：

您可以完全将控制器移动到指令中，并仍然使用依赖注入

 "use strict"; 
    angular.module('test', []).directive('test', function () {   
       return {    
            restrict: 'A',    
            scope: {
              input: '='
            },    
            templateUrl: 'gauge/gauge.tpl.html',    
            replace: true,
            controller: function($scope, newdataLoad, $timeout){
               $scope.gauge = {};
               $scope.gauge.input = 0;
            }
       }
    });

然后是模板代码：

<div>
    <div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
    </div>
</div>

Answer 2

删除curlies：

<div test input="guage.input">
</div>

Angularjs范围问题与指令

2 个答案: