Question

我尝试在控制器中提供一个模型（地理位置）作为angularJs1.3中指令的输入 -

的index.html

<html lang="en" ng-app="directivesApp">
<head>
    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
 </head>
<body ng-controller="directiveCtrl">
    <label>Geography</label><input type="text" ng-model="geography"/>
    <custom-Demo user={{geography}}></custom-Demo>
</body>
</html>

app.js

angular.module('directivesApp', [])
.directive('customDemo',function(){
    return{
        restrict:'E',
        template:'Geography : <b>{{geography}}</b>',
        scope:{geography : '='}
    }
});

但是，输入中输入的值不会反映在从指令呈现的html中。我该如何实现这一目标？

Answer 1

您将geography指令的user设置为customDemo属性。但是在您的指令中，范围中只定义了geography属性。所以将代码替换为以下内容：

<label>Geography</label><input type="text" ng-model="geography"/>
<custom-Demo geography="geography"></custom-Demo>

并将geography变量作为对象而不是值传递（不带花括号）。

或者您可以在指令中定义geography变量，如下所示：

scope: {
      geography : '=user'
}

在你的html中，只需从geography变量中删除大括号，该变量将传递给user指令的customDemo属性。

<label>Geography</label><input type="text" ng-model="geography"/>
<custom-Demo user="geography"></custom-Demo>

See it in plunker

Answer 2

DEMO：http://jsfiddle.net/softvar/b7Lf5x9r/1/

在指令中添加scope: {...}使其成为一个独立的指令。 https://docs.angularjs.org/guide/directive。还要将地理位置的值从控制器传递到指令，将其分配给控制器并将其传递给指令。如果控制器不是孤立的变量，它可以访问控制器的所有范围变量。如果您打算在指令中使用scope: {...}，则只有传递给指令的变量才可用于其作用域的指令。要访问 - scope: {...}, link: function(scope) {console.log(scope)}。

<强> JS ：

angular.module('directivesApp', [])
.controller('directiveCtrl', function ($scope) {
    $scope.geography = 'IND - Country';
})
.directive('customDemo',function(){
    return{
        restrict:'E',
        template:'Geography : <b>{{geography}}</b>',
        scope: {
            geography: '='
        }
    }
});

<强> HTML ：

<label>Geography</label><input type="text" ng-model="geography"/>
<custom-Demo data-geography="geography"></custom-Demo>

将模型绑定到自定义指令

2 个答案: