Question

怎样才能将控制器内的变量绑定到angular中指令内的输入标签的ng模型？

这是我工作的代码不起作用：内部指令html：

<input kendo-auto-complete k-data-source="data" ng-model="myValue"  style="width: 100%;" />

我的指令脚本：

 app.directive('myAutocomplete', function () {
    return {
        restrict: 'E',
        scope: {
            data: '=info',
           }
        templateUrl: '/directive.html',
        transclude: true,
        link: link,
        controller:function() {
            var a = 4;
        }
    };

在其他地方调用指令：

    <my-autocomplete info="vm.people"  ng-hide="dialogIsHidden"></my-autocomplete>{{myValue}}

Answer 1

您显示的代码中存在错误，例如您在scope属性后缺少逗号，并且您似乎引用了一个您未编写的函数link或你把它藏起来了。

看起来您正在尝试使用隔离范围在控制器和指令之间共享数据，其中指令和控制器之间存在数据双向绑定。我认为这可能是要走的路，但由于上面的一些错误，你还没有完全正确地实现它。

以下是您想要实现的（我认为）的简化演示。

DEMO

<强> app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  var vm = this;

  vm.someData = {
    value: 'bar'
  };

});


app.directive('myAutocomplete', [function(){

    return {

        restrict: 'E',

        scope: {
            someData: '=',
        },

        templateUrl: 'directive.html',


    };

}]);

<强>的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <pre>{{vm.someData}}</pre>
     <my-autocomplete some-data='vm.someData'></my-autocomplete>
  </body>

</html>

<强> directive.html

<input 
  type="text"
  ng-model="someData.value"  
/>

将数据从指令传递给控制器

1 个答案: