Question

我正在尝试使用自己的自定义控件扩展bootstrap ui库。此控件将用于AngularJS应用程序。目前，我已经陷入了范围界定。

此plunker是更复杂控件的简化版本。我想强调的概念是范围界定。您会注意到自定义控件my-query预先填充了myController.$scope.query的值。您还将看到查询放在自定义控件下面的页面中。在我输入时，该值不会更新。为什么？我的代码如下所示：

myApp.directive('myQuery', [function() {
    return {
        restrict:'E',
        transclude: true,
        scope: {
          query: '='
        },
        template: '<div ng-controller="myQueryController"><input type="text" ng-model="query" /><button ng-click="go_Click()">go</button></div>'
    };
}]);

myApp.controller('myQueryController', ['$scope', function($scope) {
    $scope.go_Click = function() {
        $scope.$emit("goClicked");
    };  
}]);

我做错了什么？

Answer 1

<div ng-controller="myQueryController">

控制器创建新范围。因此，<input type="text" ng-model="query" />不会使用指令范围内的query，而是来自控制器的范围。您可以在指令的链接方法中定义go_Click函数，而不是使用控制器。

Answer 2

在您的指令模板中，您要添加另一个控制器，该控制器正在另一个范围中添加。这就是导致问题的原因。不是这样做，而是将控制器逻辑移动到控制器功能或指令中定义的链接功能，这两种方法都可以工作。

试试这个。这是使用控制器功能的示例。请注意，我已将原始myQueryController移至指令中，并从ng-controller指令的模板中删除了myQuery指令。

'use strict';
var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', function($scope) {
  $scope.queryValue = 'test';  

  $scope.$on('goClicked', function() {
    $scope.performAction();
  });  

    $scope.performAction = function() {
       alert('Using ' + $scope.queryValue);
    };
}]);

myApp.directive('myQuery', [function() {
    return {
        restrict:'E',
        transclude: true,
        scope: {
      query: '='
    },
    template: '<div><input type="text" ng-model="query" /><button ng-click="go_Click()">go</button></div>',
    controller : function ($scope) {
      $scope.go_Click = function() {
            $scope.$emit("goClicked");
        };
    }
    };
}]);

Answer 3

你需要这个吗？：

http://plnkr.co/edit/6IrlnXvsi2Rneee0hGC8?p=preview

scope: {
  model: '='
}

问题是你使用了一个原始类型，它通过值传递给你的指令。始终使用通过引用传递的复杂类型。

隔离范围：值不更新

3 个答案: