角度组件指令和模板URL，对外部控制器的不同响应

Question

我第一次尝试指令时遇到了一些出乎意料的行为。

我正在使用带有模板网址和隔离控制器的指令。我希望模板网址中的 dom 能够基于 dom（在本例中为 select 元素）和指令控制器之间的 2 路绑定做出反应。我在绑定属性上放了一个"$watch"，该属性在首次加载指令时触发。但是，如果用户选择其他选项，则不会触发。到目前为止，这不是我从控制器经验中期望的正常功能。

我的指示如下：

    (function () {
    'use strict';
    var projMgrApp = angular.module('projMgrApp')
        .directive('elementStructure', function () {
            var structureController = ['$location', '$scope', '$window', '_', '$http', 'isAdmin', 'pmElement',
                        'GetProject', 'Enums', 'Users',
                function ($location, $scope, $window, _, $http, isAdmin, pmElement, GetProject, Enums, Users) {
                    /* Ive removed most code for simplification
                    */
                    $scope.NewElementType = null;
                    $scope.$watch('NewElementType', function (val) { alert(val); })
                }];
            return {
                restrict: 'EA',
                scope: {
                    elementType: '@',
                    projectId: '@',
                    structureTemplate: '@'
                },
                controller: structureController, 
                templateUrl: '/partials/structure.html',
            };
        });
})();

在我的模板 url 中，我有这个选择，我希望调用观察者。

<select class="form-control"
   ng-options="d for d in ProductionCategoryOptions" ng-model="NewElementType"></select>

我将此指令作为单独的组件加载两次（并且不打算共享任何值）

<fieldset class="tab-pane fade in" id="ProductionStructure">
     <element-structure element-type="Production" project-id={{Project.Id}}" structure-template={{Project.ProjectSettings.SceneStructureTemplate}}"></element-structure>
</fieldset>
<fieldset class="tab-pane fade in" id="AssetStructure">
      <element-structure element-type="Asset" project-id="{{Project.Id}}"></element-structure>
</fieldset>

Answer 1

所以我让指令按预期工作。似乎角度文档中有一些基本的怪癖还没有完全点击，而且很可能大多数我还没有

。

为了让它正常工作，我需要将 ngmodel 拉入指令中并 2 方式绑定它 （ '=' ）。在这样做之前，我在指令控制器中创建"模型"，然后它不会强制视图更新（甚至调用观察者 - 我猜测这是一个范围问题）。因此，我在外部控制器中创建了模型，并将指令绑定到现在似乎可以按我的预期工作。

在我的外部控制器中，我创建了绑定到我的指令的对象：

$scope.ProductionStructureModel = {
        Elements: null,
        NewElement: {
            Type: null,
            Path: null,
            Name: null,
            Length: null,
            Audio: null,
            Parent: null,
        }
    };

然后，我的指令引用如下：

return {
            restrict: 'EA',
            requires: '^^ngModel',
            scope: {
                elementType: '@',
                projectId: '@',
                structureTemplate: '@',
                Model: '=ngModel',
            },
            controller: structureController,
            templateUrl: '/partials/structure.html',
            link: function (scope, element, attrs) {
                scope.$watch('Model', function (val) {
                    alert(val);
                    console.log(val);
                });
            }
        };

调用我的指令的 HTML：

<element-structure element-type="Production" project-id="{{Project.Id}}"
                                       structure-template="{{Project.ProjectSettings.SceneStructureTemplate}}"
                                       ng-model="ProductionStructureModel"
                                       ></element-structure>

然而，我还没有弄清楚的一件事是，即使它按预期调整模型并更新视图 - 它仍然没有调用观察者。有人能为我阐明这一点吗？