Question

我遇到了一些基本问题。任何人都可以指出我哪里出错了？

我的控制器就像

angular.module('asApp').controller('searchCtrl', ['$scope', 'service', 
        function($scope, AppService) {

axisAPI.object()
     .app(service.app())
     .qId('abcd')
     .on('create',function(object) {
         object.paint();
     }).on('paint',function(data){
         $scope.$apply(function(){
                                $scope.profileObk = data.profile;
                                $scope.contactObj= data.profile;
          })
     }).create();
});

我的指示是

angular.module('app.core')
.directive('contactPage', DirectiveFunction2 );
function DirectiveFunction2 ($scope,config,service) {

var directive = {
    restrict: 'E',
    templateUrl: 'contacts.html',
    controller: function($scope){
     $scope.newContacts = undefined;

    $scope.$watch("contactObj", function(newVal, oldVal) {
        if (newVal==oldVal) {
            return false;
        }
        $scope.newContacts = newVal;
    }, );

}
    link:function (scope, element, attrs) {}
  }
    return directive;
}

我的HTML

<div ng-controller="searchCtrl"> </div>
<contact-page></contact-page>

如果从“searchCtrl”更新值，则应在我的指令中更改。怎么做。 “searchCtrl”是第三方控制器。

Answer 1

$watch按预期工作。请参阅docs。

jsfiddle上的实例。

＆＃13;

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.parentModel = {
      val: ""
    };
  })
  .directive('exampleDirective', function() {
    return {
      restrict: "E",
      scope: {
        parentModel: "@",
        linkController: "@"
      },
      controller: function($scope) {
        var anotherScope = angular.element(document.querySelector("*[ng-controller='"+$scope.linkController+"']")).scope();
        $scope.$watch(function() {
          return anotherScope[$scope.parentModel];
        }, function(newVal) {
          console.log('newVal', newVal);
        }, true);
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <input ng-model="parentModel.val"> {{parentModel}}
  </div>
  <example-directive link-controller="ExampleController" parent-model="parentModel"></example-directive>
</div>

＆＃13;

Answer 2

任何人都可以指出我哪里出错了？

该指令试图在指令构造函数中注入$scope。控制台中应该显示错误。

$scope不能在指令构造函数中注入。

angular.module('app.core')
.directive('contactPage', DirectiveFunction2 );
//$scope not injectable here
//function DirectiveFunction2 ($scope,config,service) {
//
//Only providers are injectable
function DirectiveFunction2 (config,service) {

var directive = {
    restrict: 'E',
    templateUrl: 'contacts.html',
    //$scope is injected as a local by $compile service
    controller: function($scope){
     $scope.newContacts = undefined;

    $scope.$watch("contactObj", function(newVal, oldVal) {
        if (newVal==oldVal) {
            return false;
        }
        $scope.newContacts = newVal;
    }, );

}
    link:function (scope, element, attrs) {}
  }
    return directive;
}

$scope服务仅将$compile作为本地提供给指令控制器构造函数。

来自文档：

控制器构造函数。

控制器在预链接阶段之前被实例化，并且可以被其他指令访问（请参阅require属性）。这允许指令彼此通信并增强彼此的行为。控制器是可注射的（并支持括号表示法），其中包含以下当地人：


$ scope - 与元素相关的当前范围

$ element - 当前元素

$ attrs - 元素的当前属性对象

$ transclude - 预先绑定到正确的转换范围的转换链接函数：function([scope], cloneLinkingFn, futureParentElement, slotName)

- AngularJS Comprehensive Directive API -- controller

如何在指令中观察控制器范围？

2 个答案:

控制器构造函数。