隔离范围：值不更新

我想用我自己的自定义控件来扩展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"); 
    }; 
}]);

我在做什么错？

来源

2014-09-11 user3284007

要小心将原语传递给嵌套作用域中的ng模型，应该总是在ng模型中有一个点 – charlietfl 2014-09-11 13:47:28

在您的指令模板中，您正在添加一个额外的控制器，该控制器将添加到另一个范围中。这是导致问题的原因。而不是这样做，将控制器逻辑移入控制器函数或在您的指令中定义的链接函数，都可以工作。

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

'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"); 
     }; 
    } 
    }; 
}]);

来源

2014-09-11 13:41:44 sma

非常有趣。我想我还有很多要了解AngularJS中的范围。 – user3284007 2014-09-11 13:47:34

https://egghead.io/technologies/angularjs。令人难以置信的视频学习Angular。 – sma 2014-09-11 13:48:42